css – 可以使用z-index在父元素后面有一个子元素

我想知道是否可以在z-index的父元素后面有一个子元素.
我想在他的内容之上使用父div作为透明的颜色层.

谢谢

解决方法

为什么不？当然可以,很简单：

>给你想要的元素一个非静态的位置;
>将小孩的z-index设置为-1;
>在主容器上创建堆栈上下文(通过设置它)
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：children继承父级的不透明度)

原文地址：https://www.jb51.cc/css/217196.html