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

Question

假设我有以下内容：

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

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

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

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

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

Answer 1

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

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

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