html - 未应用 z-index 值时订单元素堆栈出现问题

Question

我有以下 HTML 结构

https://jsbin.com/yuqolejepo/edit?html,output

DIV Box7_NEW_1438065416596 定位为 DOM 中的第一项，但在呈现的 HTML 中可视化显示在 DIV Box7

下

据我了解；

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning. Source.

现在考虑到我所有的元素都有一个非静态定位(position:absolute)为什么最低的 DOM 在同一层次结构级别仍然在视觉上位于顶部？

我发现这部分具有误导性:

...Elements with non-static positioning will always appear on top of elements with default static positioning

你能给我解释一下吗？

PS:我不需要使用 z-index 来解决这个问题，我需要一个解释。谢谢。

 <div data-dojo-attach-point="containerNode">
        <div class="Box" id="Box7_NEW_1438065416596" style="
                position: absolute;
                top: 240px;
                left: 40px;
                transform: rotate(0deg);
                width: 100px;
                height: 100px;">
            <div data-dojo-attach-point="containerNode"></div>
        </div>
        <div class="Box" id="Box7d" style="
                position: absolute;
                top: 300px;
                left: 150px;
                transform: rotate(0deg);
                width: 100px;
                height: 100px;">
            <div data-dojo-attach-point="containerNode"></div>
        </div>
        <div class="Box" id="Box7" style="
                position: absolute;
                top: 200px;
                left: 0px;
                transform: rotate(0deg);
                width: 100px;
                height: 100px;">
            <div data-dojo-attach-point="containerNode"></div>
        </div>
    </div>

---

.Box {
            position: absolute;
            background-color: mediumspringgreen;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid green;
            z-index: 1;
        }

Answer 1

您的问题中有答案。 “同一层级中最低的出现在顶部”。

Stacking without z-index

When no element has a z-index, elements are stacked in this order (from bottom to top):