html - 绝对元素位于固定元素之上？

Question

假设我有以下内容:

<div class="bottom"></div>

<div class="top"></div>

.bottom {
   position: fixed;
   //...etc
}

.top {
   position: absolute;
   //...etc
}

如何让 top 在移动设备上始终显示在 bottom 上方。我知道仅添加 z 索引是行不通的，因为元素将有自己的堆叠上下文。我需要固定底部(或像固定一样)，并且我需要顶部是绝对的(或像绝对一样)。

Answer 1

您必须将固定定位元素放入包装器中，该包装器需要形成新的堆叠上下文，并且将成为固定元素的父级，该固定元素必须位于同一堆叠上下文中。这可以通过相对定位包装元素来实现。

尽管固定定位的元素是相对于视口(viewport)进行布局的，但它们仍然保留其父元素的堆栈(和 z-index)顺序。

听起来有点令人困惑......，但这里有一个 JSFiddle来说明我上面试图解释的内容。