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

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显然需要“溢出：可见”。

知道如何做到这一点吗？

也许需要另一种技术？喜欢 CSSclip吗？

Answer 1

根据9.9.1 Specifying the stack level: the 'z-index' propertyCSS 2.2 的部分：

在每个堆叠上下文中，以下图层按从后到前的顺序绘制：

• 构成堆叠上下文的元素的背景和边框。
• 具有负堆栈级别（最负优先）的子堆栈上下文。
• 流入的、非内联级别的、非定位的后代。
• 非定位浮动。
• 流入、行内级别、非定位的后代，包括行内表和行内块。
• 堆栈级别为 0 的子堆栈上下文和堆栈级别为 0 的定位后代。
• 具有正堆栈级别的子堆栈上下文（首先是最不正的）。

列表中的第三个是position:static，第 6 个是position:absolute。我为你标记了它们。

编辑，根据您的问题编辑：

为了解决您的问题（这是您首先应该问的，恕我直言）您需要

• 适用position:relative;于您的.staticdiv，使其与div 处于同一级别position:absolute。（现在它们都将被定位）。
• 如果你想要的不是 DOM 中的最后一个，你还需要给它一个肯定的z-index，比它的兄弟姐妹大。通常，它们呈现back-to-top。

Answer 2

上述两个答案都充分解释了您所面临的情况。鉴于当前的问题，您可以使用此解决方案。只需添加position:relative到静态 div 即可。

.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>