z-index - Positioning child behind parent

Question

I'm trying to position a child element behind it's parent:

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

My CSS is:

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

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

The z-index of the <p> is lower than it's parent z-index, but it is displayed in front. Why is that?

score 5 · Accepted Answer

示例中的thediv和 thep存在于不同的堆叠上下文中，而div'sz-index告诉它比它的兄弟姐妹高两层，而不是它的孩子。

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

给出-1的pa将放在后面，而不管的。z-indexpdivdivz-index

score 2 · Accepted Answer

如果这在您的情况下是可能的，您需要防止在父级上堆叠上下文。为此，请z-index从您的中删除<div/>并将<p/>'s设置z-index为-1：

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

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

2 回答 2