Question

我有很多dom元素，需要按真实的Z位置对其进行排序，包括style.position，style.zIndex，DOM中的位置和其他样式。我认为，如果我将一个元素与另一个元素进行核对然后对其进行排序，我可以做到。我该怎么办？

链接：

https://www.w3.org/TR/css-position-3/#painting-order

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

例如：

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0;
            }
            div {
                width: 100px;
                height: 100px;
            }
            #d1 {
                background-color: yellow;
            }
            #d2 {
                background-color: blue;
                position: absolute;
                top: 150px;
            }
            #d3 {
                background-color: red;
            }
            #d4 {
                background-color: green;
                position: absolute;
                top: 0;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2"></div>
        </div>
        <div id="d3">
            <div id="d4"></div>
        </div>
    </body>
    <script>
        const d1 = document.getElementById("d1");
        const d2 = document.getElementById("d2");
        const d3 = document.getElementById("d3");
        const d4 = document.getElementById("d4");
        function isElementOverAnother(el1, el2) {
            // How ???
        }
        isElementOverAnother(d2, d1); // false
        isElementOverAnother(d4, d1); // true
        isElementOverAnother(d1, d4); // false
        isElementOverAnother(d2, d3); // true
        isElementOverAnother(d4, d1); // false
    </script>
</html>

如何编写函数isElementOverAnother？

Answer 1

要确定A是否在B上绘制（当它们重叠时），您必须：

找到A和B的通用堆叠环境
确定在那种情况下哪个是最重要的。

对于1，您需要找到他们的最亲兄弟姐妹。

对于2，您必须检查stacking context中列出的所有兄弟姐妹父母的条件，以确定他们是否创建堆叠上下文：

如果两个都这么做，则比较它们的z-index值
如果只有一个人在，那么那个在最前
如果没有兄弟姐妹的父母创建堆栈上下文，则最新的DOM在最前面。

如何检查一个dom元素是否超过另一个？

1 个答案: