Question

我想知道是否可以在z-index的父元素后面加上一个子元素。

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

Answer 1

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

为您想要的元素提供非静态位置;
将孩子的z-index设置为-1;
在主容器上创建堆叠上下文（通过在其上设置a 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

Answer 2

简短回答是;）这里有一篇很好的文章描述了如何使用元素的堆叠顺序来允许z-index为负数，以便将元素放在它的父元素后面。

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 3

不可能，因为每个定位元素都会创建堆叠上下文。

Explanation 1，Explanation 2

Answer 4

你可以用另一种方式做到这一点并使用孩子作为这样的叠加

HTML

<div id="stuff"><div class="overlay"></div>
    <p>
    Cras venenatis ornare tincidunt. Nam laoreet ante sed nibh pretium nec gravida turpis dapibus. Curabitur lobortis; lacus sit amet rutrum aliquet, est massa feugiat lectus, bibendum eleifend velit metus vitae dolor! Duis vulputate mi vitae quam fermentum pharetra.
    </p>
</div>

CSS

#stuff{
    position:relative;
    }

.overlay{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#ACA;
    opacity:0.4;
    }

Answer 5

虽然这并不一定适用于所有浏览器（尤其是旧版浏览器），但以下内容对我有用：

#child {
  position: relative;
  z-index: -1;
  ...
}

我真的只是建议将此作为最后的手段，并且仍然倾向于使用除此之外的任何技术，尽管它可能在您的场景中是理想的。

是否可以使用z-index在其父元素后面添加子元素

5 个答案: