Chrome:修复父级时,无法将一个绝对div放在另一个上面

Question

我发现当我想要在顶部的div的父级被修复时,我无法在Chrome中将一个绝对定位的div放在另一个div上:

<div id="parent">
    <div id="top"></div>
</div>
<div id="bottom"></div>

这是一个证明问题的JSFiddle:

您应该会在Chrome中看到黄色绝对定位的div与z-index 10出现在绿色绝对定位的div后面,z-index:1,因为父级的固定位置.

其他浏览器如Firefox在绿色顶部显示黄色div.

有关如何在Chrome中解决此问题的任何建议？我无法改变父母的固定位置.

谢谢!

Answer 1

您所体验的是Chrome中的一项相对较新的行为,旨在使桌面浏览器行为与移动浏览器保持一致.

当元素position: fixed;与您相似时#parent,会为该元素创建一个新的堆叠上下文,这意味着该元素及其子元素相对于彼此而不是相对于窗口上下文堆叠.因此,不是固定元素(#bottom)的子元素的元素不能放在"之间" #parent和#top.

您的解决方案是移动#bottom内部#parent(将其置于相同的堆叠上下文中),或将定位方法更改为#parent除固定之外的其他内容.