将孩子定位在父母身后

Question

我正在尝试将子元素放在它的父元素后面:

<div><p>test</p></div>

我的CSS是:

div {
    width: 100px;
    height: 100px;
    background: red;
    z-index: 2;
}

div p {
    position: relative;
    z-index: 1;
}

该z-index的<p>是低于它的父z-index,但它显示在前面.这是为什么？

Answer 1

在div与p不同的堆叠上下文中的例子存在,并且div的z-index告诉它看起来比它高两个级别的兄弟姐妹,而不是它的孩子.

但是,z-index低于零的元素会将其置于其父元素后面.

无论是什么,给予-1 的pa z-index都是p后面的.divdivz-index