与 z-index 相关的 css 绝对属性

问题描述

如果“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>

解决方法

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

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

使用上、下、左、右来实现这一点。

如果你没有为位置输入任何内容，我认为它默认为 top:0,left:0。

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

哪个元素应该在上面的决胜局是哪个元素在你的 html 中排在最后。

absolute css-position z-index