将孩子定位在父母身后

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的{​​{1}}低于其父<p>，但它显示在前面。那是为什么？

Answer 1

示例中的div和p存在于不同的堆叠上下文中，div的{​​{1}}告诉它出现比兄弟姐妹，而不是它的孩子。

但是，低于零的元素z-index会将其置于其父级之后。

z-index p为-1会使z-index置于p之后，而不管div的{​​{1}}。

Answer 2

如果在您的情况下可以实现，则需要阻止父级的堆叠上下文。为此，请从z-index移除<div/>并将<p/>的{​​{1}}设置为z-index：

-1