为什么绝对位置呈现在静态位置之上？答案

【问题标题】：Why is position absolute rendered above position static?为什么绝对位置呈现在静态位置之上？
【发布时间】：2018-11-18 05:23:21
【问题描述】：

我有一个简单的绝对 div，后面还有另一个普通 div。为什么绝对 div 呈现在另一个之上？

我知道我可以用 z-index 修复它 - 但原因是什么？

JSBIN: http://jsbin.com/yadoxiwuho/1

<style>
    .with-absolute {
      position:absolute;
      top:0px;
      bottom:0px;
      background-color:red
    }
    .other {
      background-color:yellow;
    }
  </style>
   </head>
<body>
  <div class="with-absolute">Hello</div>
  <div class="other">Why is this not on top? It comes last</div>
</body>

【问题讨论】：

标签： html css css-position

【解决方案1】：

元素的绘制顺序由CSS 2.1 spec, E.2 Painting order决定

静态定位元素在第 4 步到第 7 步中绘制。z-index 为 auto 或 0 的绝对定位元素在第 8 步中绘制，因此始终位于顶部。

【讨论】：

感谢您实际回答这个问题。虽然其他答案似乎提供了正确的信息，但我看不出它们与问题的关系
@Danield 最初的问题询问了一个原因。这个答案说“只是因为！”
这是问题的唯一答案。
@Danield 我知道为时已晚（刚刚发现这个），但至少有两个其他答案给出了错误的信息，但不幸的是被赞成了。 z-index 默认值从不是 0 也不是 1。

【解决方案2】：

absolute 元素的定位是相对于它的第一个定位的（非静态）祖先元素

Reference.

在绝对定位模型中，一个盒子显式偏移关于它的包含块。它从正常流程中移除完全（它对后来的兄弟姐妹没有影响）。一个绝对定位框为正常流建立一个新的包含块孩子和绝对（但不是固定）定位的后代。但是，绝对定位元素的内容不会流动在任何其他盒子周围。他们可能会掩盖另一个盒子的内容（或自己被遮挡），取决于重叠框。

Reference.

【讨论】：

【解决方案3】：

通常绝对元素的 z-index 的默认值为 0，它位于 static position 之上。如果要将其移到后面，请将 z-index 设置为 -1。

【讨论】：

哇，从什么时候开始？？我已经编程 css 15 年了，从来没有玩过 z-indexes。绝对元素根据 DOM 流显示。如果我有两个 div 孩子，第一个是绝对的，第二个会在上面。

【解决方案4】：

绝对：

这意味着你可以把它放在任何地方，它不会影响流程中的任何其他元素或受其影响。

与静态和相对值不同，绝对定位的元素会从正常流程中移除。

这里是示例代码：

#box_1 { 
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: #ee3e64;
}
#box_2 { 
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: #44accf;
}

DEMO 来自作者 Noah Stokes 的文档。

这里显然是 Noah Stokes 的 DOCUMENT 关于 css 定位

【讨论】：

请参阅stackoverflow.com/help/referencing 获取有关引用外部资源的帮助。

【解决方案5】：

所有静态元素都有一个默认的 z-index (auto)，意思是零。

我唯一的逻辑解释是，当您将position: relative|absolute|fixed 添加到元素时，会将其置于文档流之外，因此 z-index 变为 1。

【讨论】：