Question

当具有相对定位的元素和具有固定定位的父元素由于某种原因不受z-index属性影响时出现问题。

如果我将父元素设置为position:relative;

，一切正常

＆＃13;

.outer {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100px;
  height: 100px;
}
.inner {
  position: relative;
  z-index: 5;
}
#example1 .outer {
  position: absolute;
  top: 0;
}
#example2 .outer {
  position: fixed;
  top: 150px;
}
.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}

＆＃13;

<div id="example1">
  <div class="outer">
    <div class="inner">z-index works fine</div>
  </div>
</div>
<div id="example2">
  <div class="outer">
    <div class="inner">z-index doesn't work</div>
  </div>
</div>
<div class="backdrop">

</div>

＆＃13;

也是fiddle。

Answer 1

...或者只需在z-index:1上设置#example2 .outer即可将其置于.backdrop

之上

Answer 2

好的，所以我遇到了你的问题。要解决此问题，您必须设置z-index: 1。在您的情况下，您必须添加以下部分：

#example2 .outer {
    position: fixed;
    top: 150px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.15);
}

如果你只是弄乱z-index，元素会变得更暗。因此，您需要做的是确定不透明度等于.outer - (.outer * .backdrop) = 0.5 - (0.7 * 0.5)的黑色背景。我不能说这是最简单的解决方案，但我认为正如@Adam所述，那么你必须重新思考你的代码。

这是jsfiddle。

具有固定父级的元素的CSS z-index不起作用

2 个答案: