css - 是否有可能在他的父元素后面有一个带有 z-index 的子元素

Question

我想知道是否可以在其父元素后面使用 z-index 放置一个子元素。

我想在他的内容之上使用父 div 作为透明颜色层。

Answer 1

为什么不呢？当然可以，而且很简单:

1. 为您想要的元素提供一个非静态位置；
2. 设置 child 的z-index为-1；
3. 在主容器上创建一个堆叠上下文(通过在其上设置一个 z-index、opacity、transforms 或 whatelse 生成复合 层)。

.container {
    position: absolute;
    z-index: 0; /* or eg. opacity: 0.99;*/
  
    background-color: blue;
    color: lightblue;
    width: 100%;
    height: 100%;
    text-align: center;
}

.parent {
    position: relative;
  
    background-color: rgba(100, 255, 150, 0.75);
    color: green;
    width: 50%;
    height: 30%;
    top: 30%;
    left: 20%;
}

.child {
    position: absolute;
    z-index: -1;
  
    background-color: orange;
    color: yellow;
    width: 100%;
    height: 100%;
    top: -50%;
    left: 20%;
}

<div class="container">
    <span>container</span>
    <div class="parent">
        <span>parent</span>
        <div class="child">
            <span>child</span>
        </div>
    </div>
</div>

(如果父级用作透明层，请务必使用background-image 或 rgba background-color:子级继承opacity)