Determine whether the element is blocked by another element

[magpie]

Is it possible to determine the removal of the element to another element, provided that there is no known element that will be closed?

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;

}

<div class="wrap">

<div class="behind"></div>

<div class="container" id='e'>ad</div>

</div>

http://jsfiddle.net/rd2d2/b1ooy05y/16/

That's what happened, the problem is, if the parent (.wrap) has a z-index grad0, it doesn't cover the descendant (.container) and the violin checks this condition and makes a false disconnect.
I understand correctly that the parent can only close the descendant if the descendant has a negative z-index?

[rielyn]

As an option, you can get, uh, the coordinates of our "container" element and its, uh, plus its size. Next, go through a cycle all over DOM (on all the elements, excluding our Container) and check their coordinates, taking into account the size and parameter of z-index, which should be less than the "container" if there are matches. That's all you can do for Javascript or JQuery.

For example, with 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();

We need to check, perhaps for addition, we need to do with parseInt(ctryCoord) ...

More information (angl): https://stackoverflow.com/a/21274679/873481 and http://www.dyn-web.com/javascript/element-location/

I think the comment cyadvert may also be true.

Another option is document.elementFromPoint https://stackoverflow.com/a/3942852/873481