是否可以在其父元素后面有一个具有 z-index 的子元素

Question

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

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

Answer 1

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

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

.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-没有人告诉你关于 z-index/

Answer 3

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

说明 1、说明 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;
  ...
}

我实际上只是建议将此作为最后的手段，并且仍然更愿意使用除此之外的任何技术，尽管它可能是您的情况的理想选择。