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

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

例如：

DOM元素
A

B

C

D

CSS样式
埃莱先生{
显示：内联块；
宽度：100px；
高度：100px；
位置：相对位置；
}
p{
宽度：100%；
文本对齐：居中；
}
.ele1{
背景色：红色；
}
.ele2{
背景颜色：蓝色；
}
.ele3{
背景颜色：绿色；
}
.掩护{
位置：绝对位置；
宽度：100px；
高度：100px；
左：300px；
顶部：10px；
背景：灰色；
}

如何检测元素A未被覆盖但元素C被元素D覆盖？ 还有一件事：“D”的数量是不确定的。也许有E/F/G。。。在页面中。 我很欣赏所有的想法或现有的例子/jQuery插件/CSS/等等

---

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

您是否正在寻找类似的插件或属性

var coverElem=$（“.cover”）；
var elemArray=[]；
elemaray.push（$（.ele1”）、$（.ele2”）、$（.ele3”）；
对于（i=0；iif（currElemStPoint好。我已经检查了所有重叠的情况，并创建了这个。我使用了
getBoundintClientRect（）
并使用它来获得两个
div
的
top
，
left
，
bottom
，
right
值，在这两个
div值上要检查重叠，然后我还使用各种条件语句和条件比较了偏移量，您将在下面找到。在小提琴中，您的四个元素都有
位置：绝对
，调整它们的
顶部
和
左侧
值，使它们彼此重叠，并检查两个元素是否重叠？在函数中传递这两个元素-

checkElements(elA, elB); // pass two elements to check

这是最后一个

您将在小提琴中看到长
if
else
条件，它们只是用于测试重叠的所有可能性。下面是用于检查重叠的所有可能条件-

if((eleB.top >= eleA.top && eleB.top <= eleA.bottom) || (eleB.bottom >= eleA.top && eleB.bottom <= eleA.bottom)) {
    if((eleB.left >= eleA.left && eleB.left <= eleA.right) || (eleB.right >= eleA.left && eleB.right <= eleA.right)) {
        el1.innerHTML = '<p>covered</p>';
    }
    else {
        el1.innerHTML = '<p>not covered</p>';
    }
}
else {
    el1.innerHTML = '<p>not covered</p>';
}

使用多重检查可以看到这一点

编辑：如果循环是问题，那么您可以将
If
else
的所有循环组合成一个
If
else
，如下所示-

if(((eleB.top >= eleA.top && eleB.top <= eleA.bottom) || (eleB.bottom >= eleA.top && eleB.bottom <= eleA.bottom)) && ((eleB.left >= eleA.left && eleB.left <= eleA.right) || (eleB.right >= eleA.left && eleB.right <= eleA.right))) {
    el1.innerHTML = '<p>covered</p>'; // or your code of adding true to the attribute that tells about overlapping
}
else {
    el1.innerHTML = '<p>not covered</p>';
}

if((（eleB.top>=eleA.top&&eleB.top=eleA.top&&eleB.bottom=eleA.left&&eleB.left=eleA.left&&eleB.right下面是一个快速的示例，说明如何进行此操作。这将检查垂直和水平重叠。这是一种通用的，而不是那么通用的，因为这是基于您的任务中的HTML离子。调整
.cover
的上/左值，查看它是否适用于所有可能的情况


var$cover=$（“.cover”），
cWidth=$cover.width（），
cHeight=$cover.height（），
cLeft=$cover.offset（）.左，
cRight=$（窗口）.width（）-（裂缝+宽度），
cTop=$cover.offset（）.top，
cBtm=$（窗口）.height（）-（cTop+cHeight）；
$（“div:not（.cover）”）。每个（函数（）{
变量$this=$（this），
eleWidth=$this.width（），
eleHeight=$this.height（），
eleLeft=$this.offset（）.left，
eleTop=$this.offset（）.top，
eleRight=$（窗口）.width（）-（eleLeft+eleWidth），
eleBtm=$（窗口）.height（）-（eleTop+eleHeight）；
如果(
谱号<（左+左+左宽度）&&
cRight<（电气右侧+电气宽度）&&
cTop<（电气顶部+电气高度）&&
cBtm<（eleBtm+ELEHITH）
) {
警报（$this.text（）+”由“+$cover.text（）覆盖）；
}
})；
.ele{
显示：内联块；
宽度：100px；
高度：100px；
位置：相对位置；
边缘顶端：40px；
}
p{
宽度：100%；
文本对齐：居中；
}
.ele1{
背景色：红色；
}
.ele2{
背景颜色：蓝色；
}
.ele3{
背景颜色：绿色；
}
.掩护{
位置：绝对位置；
宽度：100px；
高度：100px；
左：60px；
顶部：110px；
背景：灰色；
}

A

B

C

D

E

F

G

掩护

为什么不尝试以下方法：

1） 查找元素相对于视口的位置：

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');

我不明白这个问题。你所说的覆盖是什么意思？你的意思是重叠的元素吗？你的意思是c被d覆盖？对不起，我更新了编辑。A，B，c，d只是一个符号，我的意思是如何检测在c区域之外有一个叫做d的元素，我们看不到整个区域？但是我们可以看到A和B的所有像素。这个问题的答案是如果要检查该元素是否被任何其他元素从左、右、上或下覆盖，则此操作将非常复杂。
var coverLeft=$（.cover”）.offset（）.left；if（coverLeft>=$（.ele3”）.offset（）.left&&coverLeft非常感谢，对于一定数量的元素，上面的代码是有效的。但我认为我的请求是不确定数量的元素。在这种情况下，您必须在一个集合中对基本元素进行分组，并在另一个集合中对元素进行覆盖。现在，第一组中的每个元素都必须根据每个元素进行检查已发送到covered element collection中。您可以非常轻松地调整上述代码以启用该功能。如果您需要更多帮助，请告诉我。此方法无法捕获“覆盖”某些内容的所有可能方式，例如，右侧的一个被错误地标记为not covered。@Wolf-是的……您完全正确。这不是
rect=elt.getBoundingClientRect();
x=rect.left;
y=rect.top;

topElt=document.elementFromPoint(x,y);

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