在固定元素内时，Google chrome 不遵守 z-index。答案

【问题标题】：Google chrome not obeying z-index when inside a fixed element.在固定元素内时，Google chrome 不遵守 z-index。
【发布时间】：2014-03-19 16:11:12
【问题描述】：

我正在为社交网络设置界面，但是，我在 google chrome 中遇到了 z-index 问题。它似乎在 safari、firefox 和 Internet Explorer 中按预期工作。

在 jsfiddle 上查看我的布局：http://jsfiddle.net/KV5nw/1/

侧边栏应固定在屏幕左侧，灰色头像应位于顶部深灰色块的上方。

如果#sidebar 已应用位置固定，则#user_avatar 的z-index 将被忽略。如果您将#sidebar 的位置设置为相对或绝对，那么#user_avatar 的z-index 就可以了。

#sidebar{
  width:inherit;
  position: fixed;
  display: block;
}
#user_avatar{
  margin:0 auto;
  width:120px;
  height: 120px;
  border:4px solid white;
  background-color: #555;
  display: block;
  margin-top:-100px;
  position: relative;
  z-index:501;
}

我使用的是 google chrome 版本：版本 32.0.1700.107

有什么建议吗？

【问题讨论】：

我希望红色的用户名块位于灰色块的下方，而头像则位于上方。不知道这样可以吗？

标签： html css google-chrome z-index

【解决方案1】：

也为固定元素设置 z-index。我的意思是：

#sidebar{
  width:inherit;
  position: fixed;
  display: block;
  z-index: 501;

}

【讨论】：

【解决方案2】：

我通过将侧边栏上的位置从固定更改为绝对

来解决类似的问题

【讨论】：

【解决方案3】：

问题在于 Chrome 会为没有设置 z-index 的元素创建一个新的 stacking context（默认为自动）。因此，您的侧边栏的 z-index 为 0，这使得它（及其所有子项）消失，因为您为 #top 容器指定了更高的 z-index。

为了解决这个问题，给侧边栏一个比#top高的z-index：

#sidebar{
    width:inherit;
    position: fixed;
    display: block;
    z-index: 501;
}

DEMO

【讨论】：

非常感谢。这有助于我了解情况。但是我意识到我希望只有头像位于灰色块上方，红色用户名块位于灰色块下方。 jsfiddle.net/KV5nw/4 在这个 js fiddle 中，你可以看到红色块越过灰色块。我想要实现的目标是这样的吗？
@k.ueckermann 不幸的是，这在 CSS 中是不可能的。但是您可以使用 JavaScript 更改 html 结构中 #user_avatar 的位置。
好的，非常感谢您的帮助！我想我现在找到了一种重组界面的方法，可以解决我的问题。

【解决方案4】：

对于普通的z-index，#user_avatar 和 #top 必须位于 DOM 上的一层。现在#user_avatar (#sidebar) 的父级有z-index:0 和#user_avatar 的z-index 仅在#sidebar 内工作。添加到 #user_avatar (#sidebar) z-index:501 的父级或替换 #user_avatar

【讨论】：