z-index - 子を親の後ろに配置する

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が、前に表示されます。何故ですか？

score 2 · Accepted Answer

あなたの状況でそれが可能な場合は、親でコンテキストをスタックしないようにする必要があります。これを行うには、からを削除し、をに設定しz-indexます。<div/><p/>z-index-1

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

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

2 に答える 2