确定绝对或全局 z-index？

Question

确定绝对或全局 z-index？

Tra*_*ton 6 javascript z-index

好的，伙计们，这是一个棘手的问题（也许）：有没有可以获得元素的某种“全局 z-index”？这是我想做的一个例子：

给定两个元素引用，您将如何确定哪个元素在 z 顺序中更高（假设它们可能没有分配 z 索引或位于单独的容器中）

欢迎详细的黑客！不那么复杂的方法更受欢迎。

Answer 1

Oli*_*ran 2

这是一个有趣的问题。以下代码可能并非没有错误。我现在只是把它放在一起，还没有完全测试过。其目的是演示一种方法。

它比较两个元素并根据三个标准对其进行测试：

查看每个元素的祖先树，如果元素 A 具有 z 索引的第一个祖先的 z 索引大于元素 B 具有 z 索引的第一个祖先（如果元素 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>

Run Code Online (Sandbox Code Playgroud)

尝试一下div主体中的嵌套 s 以测试其工作情况。

具有“position:static”的元素（所有没有显式“position”的元素都是静态的）将始终出现在具有非负“z-index”（或无“z-index”）的定位元素之前，无论其“ z-index` 值（如果有）。这应该考虑到这一点。此外，在静态元素中，浮动元素位于其他元素之上，而内联元素位于所有其他元素之上。（阅读 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index 了解更多信息）。 (2认同)
非常疯狂，这不是一个 js 函数。Flash 在 1980 年就有了这个。 (2认同)

归档时间：	14 年，7 月前
查看次数：	2824 次
最近记录：	5 年，12 月前