Question

我有3个div（黑到透明，滑块和redBox）设置如下：

<div class="black-to-transparent">
  <div class="vertical-line"></div>
</div>
<div class="slider" style="image-size:cover;">
  <div id="text">
  <p>
  Why does this text go behind a div with a lower z-index, I want it above the white line, but it has to stay in the slide.
  </p>
  </div>
  </div>
<div class="redBox" style="height:300px; width:100%; background-color:red;"></div>

CSS：

#text {
    color: red;
    z-index: 10;
    background: transparent;

  }

  .vertical-line {
    position: absolute;
    width: 1px;
    height: 75px;
    bottom: 15px;
    left: 50%;
    border-left: 1px solid white;
  }

  .black-to-transparent {
    height: 100px;
    width: 100%;
    background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
    position: relative;
    margin-bottom: -100px;
    z-index: 5;
  }

black-to-transparent的z-index高于slider，但redBox的z-index高于所有z-index。不知怎的redBox仍然出现在black-to-transparent后面。这是因为它是一个div的子节点，其z-index低于上面的div？

我该如何解决这个问题。

链接到jsFiddle：https://jsfiddle.net/AndrewL32/e35xu520/5/

Answer 1

请参阅the spec：

每个框属于一个堆叠上下文。给定堆叠上下文中的每个定位框具有整数堆栈级别，这是其在z轴上相对于同一堆叠上下文中的其他堆栈级别的位置。

和

堆叠上下文由任何定位元素（包括相对定位元素）生成，其具有计算值＆gt; z-index＆＃39;除了＆＃39; auto＆＃39;

由于您已经为2提供了自己的堆叠上下文，因此您应用于3的z-index会将其位置设置为 2。

您需要重新组织标记，以便3不是2的后代。

Answer 2

div3更高的z-index工作正在重叠div2，但由于div3的父div2位于div1以下，您可以除非您将div3放在div1之上，否则div2也会div1重叠{/ 1}}。

tldr： div1处于某个位置，div3处于另一个位置。因此，您显然不会看到div3重叠div1。

检查以下代码段：

.a1 {z-index:1;background-color: red;height:50px;width:50px;}
.a2 {z-index:0;background-color: green;height:50px;width:50px;}
.a3{z-index:2;background-color: blue;height:50px;width:50px;}

<div class="a1">
    </div>
    <div class="a2">
    <div class ="a3">
    </div>
    </div>

jsFiddle：https://jsfiddle.net/AndrewL32/e0d8my79/123/

P.S。避免使用数字启动IDs和CLASSES，因为这是不好的做法。在数字之前总是一个字母或单词，就像我上面那样。

Answer 3

只需将position: relative;添加到#text div，就像这样：

#text {
    color: red;
    z-index: 10;
    background: transparent;
    position: relative;
}

链接到jsFiddle：https://jsfiddle.net/AndrewL32/e35xu520/3/

具有高z-index的子div不起作用

3 个答案: