parent 元素的 pseudo-element、child 元素和 child 本身的 Z-index

Question

如何让parent元素的pseudo-element的z-index高于child的pseudo-element的z-index元素，但 child 本身具有最高的 z-index?

我希望红色条纹覆盖灰色矩形但不覆盖标题本身。

这是一个fiddle

 .wrapper {
     position: relative;
      background: #000;
      overflow: hidden;
    }
    .wrapper::after {
      content: "";
        position: absolute;
        width: 650px;
        height: 1500px;
        background: rgb(244,116,31);
    background: -moz-linear-gradient(top,  rgba(244,116,31,1) 0%, rgba(218,14,6,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(244,116,31,1) 0%,rgba(218,14,6,1) 100%);
    background: linear-gradient(to bottom,  rgba(244,116,31,1) 0%,rgba(218,14,6,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4741f', endColorstr='#da0e06',GradientType=0 );
        transform: rotate(40deg);
        opacity: .6;
        right: 100px;
        top: -200px;
        z-index: 10;
    
    }
    .text-block {
        position: relative;
        z-index: 10;
        width: 70%;
        margin: 0 auto;
        padding: 50px;
    }
    .text-block::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: #2b2525;
         z-index: -1;
    }
    h1 {
       position: relative;
        color: #fff;
        z-index: 12;
    }

<div class="wrapper">
        <div class="text-block">
            <h1>Text with the biggest z-index and not covered by red stripe</h1>
        </div>
    </div>

Answer 1

我删除了各处的 z-index 并将其添加到 h1 中，如下所示：

.wrapper {
 position: relative;
  background: #000;
  overflow: hidden;
}

.wrapper::after {
  content: "";
    position: absolute;
    width: 650px;
    height: 1500px;
    background: rgb(244,116,31);
    background: -moz-linear-gradient(top,  rgba(244,116,31,1) 0%, rgba(218,14,6,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(244,116,31,1) 0%,rgba(218,14,6,1) 100%);
    background: linear-gradient(to bottom,  rgba(244,116,31,1) 0%,rgba(218,14,6,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4741f', endColorstr='#da0e06',GradientType=0 );
    transform: rotate(40deg);
    opacity: .6;
    right: 100px;
    top: -200px;

}

.text-block {
    position: relative;
    width: 70%;
    margin: 0 auto;
    padding: 50px;
}

.text-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #2b2525;
}

h1 {
   position: relative;
    color: #fff;
    z-index: 1;
}

fiddle

parent 元素的 pseudo-element、child 元素和 child 本身的 Z-index

Z-index of the pseudo-element of the parent element, of the child element and the child itself

css

z-index

pseudo-element