谷歌浏览器在固定元素内时不遵守 z-index。

Question

我正在为社交网络设置界面，但是，我在 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;
}

我在谷歌浏览器版本：版本 32.0.1700.107

有什么建议吗？

Answer 1

问题是 Chrome为没有集合的元素创建了一个新的堆叠上下文z-index（默认为自动）。因此，您的侧边栏的z-index值为 0，这使得它（及其所有子项）消失，因为您为#top容器指定了更高的 z-index 。

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

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

演示