javascript - 如何检测一个元素是否被另一个元素覆盖/重叠？

Question

我有一个问题，我想检测一个元素是否被一页中的另一个元素覆盖。

例如:

DOM elements
<div class="ele ele1"><p>A</p></div>
<div class="ele ele2"><p>B</p></div>
<div class="ele ele3"><p>C</p></div>
<div class="cover"><p>D</p></div>


CSS style
.ele{
   display: inline-block;
   width: 100px;
   height: 100px;
   position: relative;
}
p{   
  width: 100%;
  text-align: center;
}
.ele1{
  background-color: red;
}
.ele2{
  background-color: blue;
}
.ele3{
  background-color: green;
}
.cover{
   position: absolute;
   width: 100px;
   height: 100px;
   left: 300px;
   top: 10px;
   background: grey;
}

http://jsfiddle.net/veraWei/6v89b1fy/

如何检测元素A没有被覆盖，而元素C被元素D覆盖？还有一件事:“D”的数量不确定。也许页面中有 E/F/G...。我感谢所有想法或现有示例/jQuery 插件/CSS/等。

感谢你们所有人的详细回答。但我需要更简短的解释，也许一个属性表明 A 未被任何元素覆盖，而 C 被渲染覆盖。是否存在任何插件或属性？

Answer 1

为什么不尝试以下方法:

1) 找到元素相对于视口(viewport)的位置:

rect=elt.getBoundingClientRect();
x=rect.left;
y=rect.top;

(或者可以考虑中点坐标)

2) 找到位置x,y处的顶部元素:

topElt=document.elementFromPoint(x,y);

3) 检查顶部元素是否与原始元素相同:

if(elt.isSameNode(topElt)) console.log('no overlapping');