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

Question

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

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

Answer 1

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

1. 给你想要的元素一个非静态的位置;
2. 一套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父级)

Answer 2

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

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

Answer 3

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

说明1、说明2