Определить перекрыт ли элемент другим элементом

#javascript #css #css3 #z_index

Возможно ли определить перекрытие элемента другим элементом, при условии что не известен
элемент который будет перекрывать?



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;
}


ad





Пример на JSFiddle UPD

Вот что получилось, проблема в том, что если у родителя (.wrap) стоит z-index >0
он не перекрывает потомка (.container), а скрипт проверяет это условие и получается
ложное перекрытие.
Я правильно понимаю что родитель может перекрыть потомка только если у потомка отрицательный
z-index?
    

Ответы

Ответ 1

Как вариант, можно получить х,у координаты нашего "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


Ответ 2

Можно получить точки для прямоугольника через offset и длину/ширину элемента и по
ним определить пересечение.

$(document).ready(function(){
  function getPositionRect(jObject){
      return { 
               x0 : jObject.offset().top, y0 : jObject.offset().left, 
               x1 : jObject.offset().top + jObject.width(), y1 : jObject.offset().left
+ jObject.height() 
             };
  }
  function intersects(a, b){
       return ( a.y0 < b.y1 || a.y1 > b.y0 || a.x1 < b.x0 || a.x0 > b.x1 );
  }

  var overlap = $($('.overlap').eq(0)),
      container = $($('.container').eq(0));

  console.log(
      intersects(getPositionRect(overlap),getPositionRect(container))
  );
});


Ответ 3

Можно заюзать такой метод: 
https://developer.mozilla.org/ru/docs/Web/API/Element/getBoundingClientRect
вернёт координаты прямоугольников. А там уже легко проверить пересечение.