为什么绝对定位元素会显示在静态元素上方？

Question

我知道绝对定位会打破正常流程，但由于HTML中的绝对元素先于静态元素，我希望它在显示顺序上也能得到反映。

.absolute
{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
}

.static
{
  background-color: red;
  height: 20px;
  width: 400px;
}

<div>
  <div class="absolute"></div>
  <div class="static"></div>
</div>

我需要这个是因为我想显示一个滑动菜单（'.absolute' div），它从下往上滑动并且看起来像是从 '.static' div 的后面出现。

容器div 显然需要设置 'overflow: visible'。

你有什么实现的想法吗？

也许需要另一种技术？比如CSS的clip？

- Don Box

Answer 1

根据 CSS 2.2 的9.9.1指定层级：'z-index' 属性，在每个堆叠上下文中，以下图层按从后到前的顺序绘制：

- 形成堆叠上下文的元素的背景和边框。 - 具有负堆叠级别的子堆叠上下文（从最负开始）。 - 非行内级别、非定位后代元素的流动内容。 - 未定位的浮动元素。 - 非定位的行内级别、流动内容，包括行内表格和行内块。 - 堆叠级别为0的子堆叠上下文和具有堆叠级别0的定位后代元素。 - 具有正堆叠级别的子堆叠上下文（从最小正值开始）。

列表中的第三个是position: static，第六个是position: absolute。我已经标记了它们。

要解决你的问题（这也应该是你一开始就问的问题），你需要：

- 给你的 .static div 应用position: relative;，将其与 position: absolute 的元素置于同一级别（现在它们都是定位的）。 - 如果你想要置于顶部的元素不是 DOM 中的最后一个，则还需要为它分配正的 z-index，以确保它比它的兄弟元素更高。通常它们是按从后到前的顺序呈现的。

- tao

---

但我没有指定任何z-index :) - Don Box

你认为不指定它就会消失或不适用吗？所有元素都有默认的z-index。没有它，浏览器将不知道在哪里绘制它们。上面的规则是针对你的使用情况指定它们的顺序的。我不能再帮助你了。你问为什么，我链接了正在应用的规则，因为它目前在规范中被制定。 - tao

谢谢，但你不需要设置z-index。正如你所说，“你认为不指定它会使它不存在或不适用吗？” - Don Box

如果您不设置z-index，则最后一个将呈现在顶部。我认为如果我在答案中清楚地指明这一点，将有助于更多的人。 - tao

Answer 2

以上两个答案已经充分解释了你所面临的情况。针对手头的问题，你可以使用这个解决方案。只需在静态div中添加position:relative即可。

.absolute
{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
}

.static
{
  background-color: red;
  height: 20px;
  width: 400px;
  position: relative;
}

<div>
  <div class="absolute"></div>
  <div class="static"></div>
</div>

- Vishwas Singh Chouhan

---

实际上不需要添加z-index，只需将其更改为相对定位，以便由z-index给出的顺序生效 :) - Don Box

@DonBox 是的，我刚刚注意到了。我已经相应地修改了答案。 - Vishwas Singh Chouhan

@Don，这正是我在我的答案中给你的解决方案。我的答案和这个答案之间唯一的区别在于，在我的答案中我解释了为什么你需要这样做。 - tao

Answer 3

绝对定位意味着您可以将此类 div 放置在任何位置，且不会影响或受到流中的任何其他元素的影响。

绝对定位元素完全从正常流中移除。

为了获得所需效果，您可能需要使用 z-index 和 position: relative 和 position: absolute。

- Plenarto