好的，伙计们，这是一个棘手的问题(也许):是否有任何方法可以获得元素的某种“全局 z-index”？这是我想做的一个例子:
给定两个元素引用，您将如何确定哪个在 z 顺序中更高(假定它们可能没有分配 z 索引或位于不同的容器中)
欢迎详细的黑客攻击!不那么详尽的方法不受欢迎。
最佳答案
这是一个有趣的问题。以下代码可能并非没有错误。我现在只是把它放在一起，还没有完全测试过。其目的是展示一种方法。
它比较两个元素并根据三个标准测试它们:
查看每个元素的祖先树，如果元素 A 具有 z-index 的第一个祖先的 z-index 大于元素 B 具有 z-index 的第一个祖先(如果有对于元素 B 完全存在)，那么元素 A 在 z 顺序中更高。
否则，如果元素 B 是元素 A 的后代，则元素 B 具有更高的 z 顺序。
否则，查看元素 A 和元素 B 共有的最后一个祖先的 sibling ，如果元素 A 的祖先在该共同祖先的子数组中排在第一位，则元素 B 具有更高的 z订单。
上面的逻辑可能有更简单的描述方式，算法也可以改进。 (例如，上面的第二个检查可以先完成。)但是，这是代码:
<html>
<head>
<script language="javascript">
function getAncestorsAsArray(element){
var arr = new Array();
arr.unshift(element);
while (arr[0].parentNode){
arr.unshift(arr[0].parentNode);
}
return arr;
}
function highestInitialZIndex(elementArr){
for (var i=0; i<elementArr.length; i++){
if (elementArr[i].style == undefined) continue;
var r = elementArr[i].style.zIndex;
if (!isNaN(r) && r!="") {
return r;
}
}
return undefined;
}
function findCommonAncestor(elementArr1, elementArr2){
var commonAncestor;
for (var i=0; i<elementArr1.length; i++){
if (elementArr1[i] == elementArr2[i]) {
commonAncestor = elementArr1[i];
}
}
return commonAncestor;
}
function findHighestAbsoluteIndex(element1, element2){
var arr1 = getAncestorsAsArray(element1);
var arr2 = getAncestorsAsArray(element2);
// Does an ancestor of one elment simply have a higher z-index?
var arr1Z = highestInitialZIndex(arr1);
var arr2Z = highestInitialZIndex(arr2);
if (arr1Z > arr2Z || (!isNaN(arr1Z) && isNaN(arr2Z))) return element1;
if (arr2Z > arr1Z || (!isNaN(arr2Z) && isNaN(arr1Z))) return element2;
// Is one element a descendent of the other?
var commonAncestor = findCommonAncestor(arr1, arr2);
if (commonAncestor == element1) return element2;
if (commonAncestor == element2) return element1;
// OK, which has the oldest common sibling? (Greater index of child node for an element = "older" child)
var indexOfCommonAncestor;
for (var i=0; i<arr1.length; i++){
if (arr1[i] == commonAncestor) {
indexOfCommonAncestor = i;
break;
}
}
for (var j=commonAncestor.childNodes.length; j>=0; j--){
if (arr1[indexOfCommonAncestor+1] == commonAncestor.childNodes[j]) return element1;
if (arr2[indexOfCommonAncestor+1] == commonAncestor.childNodes[j]) return element2;
}
}
function doTest(){
var e1 = document.getElementById("myDiv1");
var e2 = document.getElementById("myDiv2");
highest = findHighestAbsoluteIndex(e1, e2);
alert(highest.id);
}
</script>
</head>
<body onload="javascript:doTest();">
<div>
<div>
<div style="position:absolute; z-index:20;" id="myDiv1">
</div>
</div>
</div>
<div>
</div>
<div style="position:absolute; z-index:10;" id="myDiv2">
</div>
</body>
</html>
尝试使用正文中嵌套的 div 来测试它是否正常工作。
关于javascript - 确定绝对或全局 z-index？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5930224/