说我有两个盒重叠（fiddle）
<html>
<body>
<div class="box">element 1</div>
<div class="box" style="left: 20px; top: 10px; background-color: red;">element 2</div>
<style>
.box {
background-color: green;
position: absolute;
width: 100px;
height: 100px;
border: 1px sold red;
}
</style>
</body>
</html>
有没有办法在vanilla javascript中告诉哪个框在另一个框之上？我只关心用户在视觉上看到的内容。
像下面的东西
isAbove(el1, el2) // false
isAbove(el2, el1) // true
关于我能想到的唯一方法是获取所涉及元素的dom路径，并通过声明检查哪一个首先出现;这应该会给你一个想法，在没有z-index的情况下，哪个元素自然会显示在另一个元素的“顶部”。
function getAncestors(ele) {
var ancestors = [ele];
while(ele.parentElement) { // walk all parents and get ancestor list
ele = ele.parentElement;
ancestors.push(ele);
}
return ancestors.reverse(); // flip list so it starts with root
}
function declaredBefore(ele1,ele2) {
var a1 = getAncestors(ele1);
var a2 = getAncestors(ele2);
for(var i=0;i<a1.length;i++) { // check path, starting from root
if(a1[i] !== a2[i]) { // at first divergent path
var testNodes = a1[i-1].childNodes; // get children of common ancestor
for(var j=0;j<testNodes.length;j++) { // check them for first disparate ancestor
if(testNodes[j] === a1[i]) { return true; } // ele1 is first
if(testNodes[j] === a2[i]) { return false; } // ele2 is first
}
}
}
return undefined; // could not determine who was first
}
function isAbove(ele1, ele2) {
// rudimentary z-index check for eles sharing a parent
if(ele1.parentNode === ele2.parentNode) {
var z1 = ele1.style.zIndex;
var z2 = ele2.style.zIndex;
if(z1 !== undefined && z2 !== undefined) { // if both have z-index, test that
return z1 > z2;
}
}
return declaredBefore(ele2, ele1); // if 2 is declared before 1, 1 is on top
}
这个解决方案远非防弹，但它至少应该让你知道哪个元素是最后声明的，占dom树层次结构。除非元素共享父元素，否则它也不会比较zIndex，尽管您可以修改它以检查父元素的zIndex层次结构。
只需获取这些元素zIndex并进行比较