与z-index相关的css绝对属性[重复]答案

【问题标题】：css absolute property with the relevance to z-index [duplicate]与z-index相关的css绝对属性[重复]
【发布时间】：2021-05-03 16:56:45
【问题描述】：

如果“b”在同一个 z-index 上，为什么要放在“a”上？而不是放在“a”下

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

从一只手

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

来自另一只手

当没有指定 z-index 属性时，元素在默认渲染层 0（零）上渲染。

然而并没有清楚地描述当两个元素共享相同的 z-index 值时会发生什么。在示例中，两个元素都没有任何特定的 z-index 值，因此默认情况下 z-index 等于“0”零。

如果“b”在同一个 z-index 上，为什么要放在“a”上？而不是放在“a”下

* {
  padding: 0;
  margin: 0;
}

.a,
.b {
  width: 200px;
  height: 200px;
  font-size: 36px;
}

.a {
  background-color: grey;
  position: absolute;
}

.b {
  background-color: green;
  margin-left: 50px;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
</body>
</html>

【问题讨论】：

来自上面的链接^ 所有定位的、不透明的或变换的后代，按树形顺序分为以下几类：所有定位的后代，带有'z-index：auto'或'z-index : 0'，按树顺序。 树顺序

标签： css css-position overlay z-index absolute

【解决方案1】：

这是因为 b 在您的 html 中位于 a 之后/下方。

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

使用 top、bottom、left 和 right 来实现这一点。

如果您不输入任何位置，我认为它默认为顶部：0，左侧：0。

因此，每次潜水 (a & b) 都被拉出其余元素并卡在左上角。（您使用边距在元素 b 上移动，但它们仍然有一点重叠）。

哪个元素应该在顶部的决定因素是哪个元素在您的 html 中排在最后。

【讨论】：

是的，我看到了 DOM。所以你的意思是如果两个具有纯“位置：绝对”属性的元素在同一个z-index上它们会重叠？这是否意味着它们位于不同的“z”水平？
@Redgard 我刚刚编辑了该答案以提供更多信息。