Question

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

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

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

如果#sidebar的位置已固定，则会忽略＃user_avatar＆＃39; s z-index。如果您将#sidebar的位置设置为relative或absolute，那么＃user_avatar＆＃39; s 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的元素创建了新的stacking context（默认为自动）。因此，由于您为z-index容器指定了更高的z-index，因此您的侧边栏的#top为0会使其（及其所有子级）消失。

要解决此问题，请边栏z-index高于#top的边栏：

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

DEMO

Answer 2

对于普通#user_avatar，

#top和z-index必须放在DOM的一个级别上。现在，#user_avatar（#sidebar）的父级z-index:0和#user_avatar的z-index仅在#sidebar内部工作。添加到#user_avatar的父级#sidebar）z-index:501或替换#user_avatar

Answer 3

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

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

}

Answer 4

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

来解决类似的问题

Google Chrome在固定元素内部时不遵守z-index。

4 个答案: