确定绝对或全局z指数？ [英] Determine absolute or global z-index?
问题描述
好的伙计们，这里有一个棘手的问题（也许）：有没有得到某种元素的全局z指数？这里是我想要做的一个例子：
OK guys, here's a tricky one (perhaps): is there any to get a sort of "global z-index" of an element? here is an example of what i'd like to do:
给出两个元素引用，你如何确定z顺序中哪一个更高（假设它们可能没有指定z-indices或分开的容器）
given two element references, how would you determine which one is hiher in the z order (given that they may not have assigned z-indices or are in separated containers)
欢迎精心制作黑客！不那么复杂的方法 more 而不是欢迎。
Elaborate hacks welcome! Not-so elaborate methods more than welcome.
推荐答案
这是一个有趣的问题。以下代码可能没有错误。我现在就把它放在一起，并没有完全测试它。它的目的是展示一种方法。
This was an interesting problem. The following code may not be bug free. I just put it together right now and haven't tested it entirely. Its purpose is to demonstrate an approach.
它比较了两个元素，并根据三个标准对它们进行测试：
It compares two elements and tests them on three criteria:
-
查看每个元素的祖先树，如果元素A的第一个祖先具有z-index，则z-index比元素B的第一个祖先具有更大的z-index以具有z-index （如果元素B完全存在），则元素A在z顺序中更高。
Looking through the ancestor tree of each element, if the first ancestor for element A to have a z-index has a greater z-index than the first ancestor of element B to have a z-index (if one exists for element B at all), then element A is higher in the z-order.
否则，如果元素B是元素的后代然后元素B具有更高的z顺序。
Otherwise, if element B is a descendent of element A then element B has a higher z-order.
否则，查看元素A和元素B共有的最后一个祖先的兄弟姐妹，如果元素A的祖先在该共同祖先的子元素数组中首先出现，然后元素B具有更高的z顺序。
Otherwise, looking at the siblings of the last ancestor that element A and element B had in common, if an ancestor of element A comes first in the array of children of that common ancestor then element B has a higher z order.
可能有一种更简单的描述上述逻辑的方法，可以改进算法。 （例如，上面的第二次检查可以先完成。）但是，这里是代码：
There may be an simpler way of describing of the logic above and the algorithm can be improved. (For example, the second check above could be done first.) However, here's the code:
<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 身体测试它的工作。
Play around with the nested divs in the body to test it working.
这篇关于确定绝对或全局z指数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
