Возможно ли определить перекрытие элемента другим элементом, при условии что не известен элемент который будет перекрывать?
var e = document.getElementById('e');
var eR = e.getBoundingClientRect();
var all = document.getElementsByTagName('*');
for (var i=0, max=all.length; i < max; i++) {
var cR = all[i].getBoundingClientRect();
if(all[i] != e) {
if (((cR.top <= eR.top) && (eR.top <= cR.bottom)) &&
((cR.top <= eR.bottom) && (eR.bottom <= cR.bottom)) &&
((cR.left <= eR.left) && (eR.left <= cR.right)) &&
((cR.left <= eR.right) && (eR.right <= cR.right))) {
//var inside = true;
var style = window.getComputedStyle ? getComputedStyle(all[i]) : all[i].currentStyle;
if(style.zIndex >= 1) {
var overlap = true;
console.log(style.zIndex);
}
}
}
}
.wrap {
width:700px;
overflow:hidden;
height:600px;
background-color:yellow;
z-index:9999;
}
.behind {
position: absolute;
left:8px;
top:0px;
width:468px;
height:160px;
background-color:rgba(255, 0, 0, 0.71);
z-index: 999;
}
.container {
background-color:black;
left:20px;
top:50px;
width:468px;
height:60px;
color:#fff;
}
Пример на JSFiddle UPD
Вот что получилось, проблема в том, что если у родителя (.wrap) стоит z-index >0 он не перекрывает потомка (.container), а скрипт проверяет это условие и получается ложное перекрытие. Я правильно понимаю что родитель может перекрыть потомка только если у потомка отрицательный z-index?
Ответ
Как вариант, можно получить х,у координаты нашего "container" элемента и его х,у + его размер. Далее, пройтись циклом по всему DOM (по всем элементам, исключая наш "container") и проверять их координаты учитывая размеры и параметр z-index, который должен быть меньше чем у "container" в случае если есть совпадения координат. Это все можно или на Javascript сделать, или с JQuery.
Например, с JQuery: http://www.sitepoint.com/jquery-coordinates-element/
var ctrxCoord = $(".container").offset().left;
var ctryCoord = $(".container").offset().top;
var ctrwidthCoord = ctrxCoord + $(".container").width();
var ctrheightCoord = ctryCoord + $(".container").height();
Нужно проверить, возможно, для добавления, нужно делать с parseInt(ctryCoord) ...
Больше информации (англ.): https://stackoverflow.com/a/21274679/873481
и http://www.dyn-web.com/javascript/element-location/
Думаю, комментарий cyadvert может также быть верным.
Еще вариант - document.elementFromPoint https://stackoverflow.com/a/3942852/873481
Комментариев нет:
Отправить комментарий