html - Chrome：当父级固定时，不能将一个绝对 div 定位在另一个上

Question

我发现当我想要位于顶部的 div 的父级是固定的时，我无法在 Chrome 中将一个绝对定位的 div 放置在另一个上：

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

这是一个演示问题的 JSFiddle：

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

其他浏览器（如 Firefox）在绿色 div 之上显示黄色 div。

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

谢谢！

score 10 · Accepted Answer

您正在体验的是 Chrome 中相对较新的行为，引入该行为是为了使桌面浏览器行为与移动浏览器保持一致。

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

您的解决方案是移动#bottom内部#parent（将其放在相同的堆叠上下文中），或者将定位方法更改为#parent固定之外的其他方法。

可以在此处找到有关 Chrome 更改的提案：http: //lists.w3.org/Archives/Public/www-style/2012May/0473.html

score 3 · Accepted Answer

我一直在摆弄这个，我得出的结论是，在 chrome 中，parent和top元素是不可分割的。我试图得出这个结论的是将bottom元素放在parent“三明治”之上并摆弄 z-index。我可以让bottom三明治出现在上面或下面，但不能直接出现在里面。

对我有用的是：

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

我不知道您页面的上下文，因此这对您来说可能是无用的响应，但我认为这样做然后调整位置以在页面的 x 和 y 轴上获得所需的结果将比尝试更容易如您所愿，从外面将三明治中的元素滑入。

score 0 · Accepted Answer

0

我正在使用 Chrome 版本：21.0.1180.89 m，黄色位于绿色上方。

于 2012-12-10T10:56:42.537 回答

score 0 · Accepted Answer

0

试试这个代码：

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

</div>

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

于 2012-12-10T10:52:40.343 回答

score 0 · Accepted Answer

仅适用于 chrome 的位置：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 #parent {
    position: absolute;
  }
}

5 回答 5