css绝对属性和z索引相关

如果它们位于同一个z-指数上，为什么“b”要放在“a”之上？而不是放在“a”之下

似乎我已经阅读了developer.mozilla.org和w3.org上解释z-index属性的所有资料，但我仍然无法解释为什么绿色方块与黄色方块重叠

一方面

绝对定位的元素将完全从文档流中删除。这意味着它们对它们的父元素或源代码中在它们之后出现的元素没有任何影响。因此，绝对定位的元素将与其他内容重叠，除非您采取措施加以阻止。当然，有时候，这种重叠正是您想要的，但是您应该意识到这一点，以确保您得到了您想要的布局

从另一方面

如果未指定z索引属性，则元素将在默认渲染层0（零）上渲染

但是，当两个元素共享相同的z索引值时，会发生什么情况，这一点没有明确描述。 在本例中，两个元素都没有任何特定的z索引值，因此默认情况下z索引等于“0”零

如果它们位于同一个z-指数上，为什么“b”要放在“a”之上？而不是放在“a”之下

*{
填充：0；
保证金：0；
}
A.
.b{
宽度：200px；
高度：200px；
字体大小：36px；
}
.a{
背景颜色：灰色；
位置：绝对位置；
}
.b{
背景颜色：绿色；
左边距：50像素；
位置：绝对位置；
}

文件
A.
B

这是因为在html中，b在a之后/之下

它们都在同一个z水平面上。您可以通过在a或b上设置不同的z索引来测试这一点。 …但它们存在于不同的层面上。每一个（绝对部分）都被单独处理，并根据您的css定位在屏幕上

使用顶部、底部、左侧和右侧来实现这一点

若你们并没有为position输入任何内容，我认为它默认为top:0，left:0

因此，每一次俯冲（a&b）都会从其余元素中拉出，并卡在左上角。（您使用边距在元素b上移动，但它们仍有一点重叠）

---

哪个元素应该位于顶部的分界符是哪个元素在html中位于最后。

是的，我看到了DOM。那么你的意思是，如果两个具有纯“位置：绝对”属性的元素位于同一个z索引上，它们将重叠？这难道不意味着它们位于不同的“z”级别吗？@Redgard我刚刚编辑了这个答案以提供更多信息。从上面的链接中，^All Posited、opacity或transform后代，按树顺序分为以下几类：按树顺序排列的所有“z-index:auto”或“z-index:0”的定位后代。