[英]Determine absolute or global z-index?
好的,伙計們,這是一個棘手的問題(也許):有沒有可以獲得元素的某種“全局 z-index”? 這是我想做的一個例子:
給定兩個元素引用,您將如何確定哪個元素在 z 順序中更高(假設它們可能沒有分配 z 索引或位於單獨的容器中)
歡迎詳細的黑客! 不那么復雜的方法更受歡迎。
這是一個有趣的問題。 以下代碼可能沒有錯誤。 我現在只是把它放在一起,還沒有完全測試過。 它的目的是展示一種方法。
它比較兩個元素並根據三個標准測試它們:
查看每個元素的祖先樹,如果元素 A 具有 z-index 的第一個祖先的 z-index 大於元素 B 具有 z-index 的第一個祖先的 z-index(如果元素 B 根本存在) ),則元素 A 在 z 順序中較高。
否則,如果元素 B 是元素 A 的后代,則元素 B 具有更高的 z 順序。
否則,查看元素 A 和元素 B 共有的最后一個祖先的兄弟姐妹,如果元素 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
來測試它是否工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.