Question

所以我有这个小提琴：

https://jsfiddle.net/ionescho/t0qo6z5u/。使用html：

<div id="overlay">
</div>

<div id="top_menu">
    <span>
        fasdfsfafasdfas
    </span>
</div>

和css：

#overlay{
    position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  background-color: #000;
  opacity: 0.8;
}
#top_menu{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:200px;
    background-color:red;
    padding-top:40px;
    padding-left:40px;
}
#top_menu > span{
    font-weight:bold;
    color:white;
    font-size:30px;
    z-index:1101;
    position:relative;
}

如您所见，白色文字仍位于半透明叠加层后面。如果我将span的父级（#top_menu）从“position：fixed”修改为“position：relative”，我会得到我正在寻找的z-index行为。

然而，我不能失去那个“位置：固定”的财产。有谁知道为什么会这样，我怎么能解决这个问题呢？

感谢。

Answer 1

您当前的行为是标准行为，适用于Firefox。

然而，根据this answer，

对于具有position: fixed的元素，此行为将被更改，以便它们始终建立堆叠上下文无论他们的z-index价值如何。一些浏览器已经开始采用但是这种行为并没有反映出来还是CSS2.1或新的CSS Positioned Layout Module，所以它可能没有现在明智地依靠这种行为。

然后，如果#top_menu建立了堆叠上下文，则z-index的{{1}}会将其z位置设置在该堆叠上下文中。但是，#top_menu > span低于#top_menu。

要解决此问题，您可以将#overlay设置为z-index（从而在所有浏览器上生成堆叠上下文），其值高于#top_menu的值。但是，#overlay的背景将位于#top_menu前面。

#overlay

＆＃13;

#top_menu {
  z-index: 1101;
}

＆＃13;

#overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  background-color: #000;
  opacity: 0.8;
}
#top_menu {
  position: fixed;
  z-index: 1101;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background-color: red;
  padding-top: 40px;
  padding-left: 40px;
}
#top_menu > span {
  font-weight: bold;
  color: white;
  font-size: 30px;
  z-index: 1101;
  position: relative;
}

＆＃13;

Answer 2

我不确定你想要达到什么目标。跨度 - 作为#top_menu的子节点从其父节点继承z-index。您希望菜单位于叠加层的顶部吗？在这种情况下，＃top_menu需要z-index属性。如果您只希望跨度位于顶部，则必须将其移出父容器并为文本本身定位一个位置。

为什么浏览器不尊重具有“position：fixed”父元素的元素的z-index？

2 个答案: