Question

我有以下HTML结构

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

DIV Box7_NEW_1438065416596被定位为DOM中的第一项，但呈现的HTML在DIV Box7

下以可视方式显示

为了我的理解;

没有任何z-index值，元素按照它们的顺序堆叠出现在DOM中（同一层次结构中最低的一个）出现在上面）。具有非静态定位的元素将始终出现在具有默认静态定位的元素的顶部。 Source

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

我发现这部分有误导性：

...具有非静态定位的元素将始终显示在顶部具有默认静态定位的元素

能否请你澄清一下？

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

当没有元素具有z-index时，元素按此顺序堆叠（从下到上）：

Answer 2

“（同一层级的最低层出现在顶部）” Box7是最低的。

Answer 3

具有相同z-index的下一个块将始终具有比前一个更大的z-index。这将是＆＃34;虚拟＆＃34; z索引。

例如：

DIV 1具有z-index：1且它具有正常的z-index 1;
DIV 2有z-index：1，但由于prev有z-index 1，我们在这里得到z-index 1.2;
DIV 3有z-index：1，但由于prev有z-index 1.2，我们在这里得到z-index 1.3。

PS：这个简单的解释没有困难。不是按规范

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

3 个答案: