Question

我知道绝对定位打破正常流程，但由于HTML中的顺序首先是绝对元素，然后是静态元素，我期望它也会反映在显示顺序中。

＆＃13;

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

＆＃13;

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

＆＃13;

我需要这个的原因是因为我想要显示一个滑动菜单（＆＃39; .absolute＆＃39; div），它从下到上滑动，看起来像是来自＆＃39; .static＆＃39;的背面。 div。容器div显然需要溢出：可见＆＃39;。

知道怎么做到这一点吗？

可能还需要其他技术吗？像CSS clip？

Answer 1

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

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


构成堆叠背景的元素的背景和边框。

子堆叠上下文具有负堆栈级别（最多为负数）。

流入式，非内联级别， 非定位后代 。

未定位的花车。

in-flow，内联级别，非定位后代，包括内联表和内联块。

堆叠级别为0的子堆叠上下文和堆栈级别为0的 定位后代 。

具有正堆栈级别的子堆叠上下文（最少积极的第一个）。

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

根据您的问题修改编辑：

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

将position:relative;应用于您的.static div，使其与position:absolute一个级别相同。（现在＆＃39; ll都是位置 ed。）

如果你想要的那个不是DOM中的最后一个，你还需要给它一个肯定的z-index，比它的兄弟姐妹更大。通常它们会被渲染为 back-to-top 。

Answer 2

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

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

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

Answer 3

上述两个答案都对您面临的情况给出了充分的解释。鉴于手头的问题，您可以使用此解决方案。只需将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>

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

3 个答案: