固定元素顶部的绝对元素？

Question

假设我有以下内容：

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

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

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

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

如何让top始终显示在移动设备上bottom 之上。我知道只是添加一个z-index不会起作用，因为元素将有自己的堆叠上下文。我需要修复底部（或者像固定一样）并且我需要顶部是绝对的（或者像绝对一样）。

Answer 1

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

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

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

Answer 2

如果底部应位于绝对底部和顶部顶部，则使用：

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

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

编辑：我可能误解了您的问题。如果你的意思是在z轴上面，那么制作它可能是值得的，所以顶部所有元素的所有z值都大于底部所有元素的所有z值。