のz-indexが子のzインデックスにどのように影響するかを親

Question

#parent { 
 
    position: relative; 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    z-index: 1; 
 
} 
 

 
#child { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    z-index: -1; 
 
    transform: translateX(20px); 
 
}

<div id="parent"> 
 
    <p> 
 
    qqq 
 
    </p> 
 
    <div id="child" > 
 
    test 
 
    </div> 
 
</div>

私は1に親のzインデックスを設定しない場合、子のZインデックスは、親の下でそれをできるようになります。しかし、親のz-インデックスを1（または0より大きい任意の数）に設定すると、子供のZ-インデックスは機能しません！

誰でもこれが起こったのですか？

Answer 1

、すべての背景色は、テキストの後ろになります。 z-indexのデフォルトはautoで、スタックの順序をその親に等しく設定します。ただし、子にz-indexを使用すると、自然なスタック順序から移動し、バックグラウンドの背後に配置されます。親をZインデックスに変更すると、スタックに再び参加し、背景色がテキストの後ろに再び表示されます。

親と子の両方がAUTOに設定されています。両方とも同じスタックにあります。 z-index -1に設定

#parent { 
 
    position: absolute; 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#child { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    transform: translateX(20px); 
 
}

<div id="parent"> 
 
    <div> 
 
    qqq 
 
    </div> 
 
    <div id="child" > 
 
    test 
 
    </div> 
 
</div>

子は、今では

#parent { 
 
    position: absolute; 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#child { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    z-index: -1; 
 
    transform: translateX(20px); 
 
}

<div id="parent"> 
 
    <div> 
 
    qqq 
 
    </div> 
 
    <div id="child" > 
 
    test 
 
    </div> 
 
</div>

子供がz-index 1に設定z-index -1と親に設定し、親と同じスタックではありません両方のことをsaにする私は背景色が両方の要素の後ろに置かれるようにスタックします。

#parent { 
 
    position: absolute; 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    z-index: 1; 
 
} 
 

 
#child { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    z-index: -1; 
 
    transform: translateX(20px); 
 
}

<div id="parent"> 
 
    <div> 
 
    qqq 
 
    </div> 
 
    <div id="child" > 
 
    test 
 
    </div> 
 
</div>

Answer 2

子供にz-index: -1;を設定すると、もちろんその子供は親の後ろにいるでしょう。子からz-index: -1;を削除する場合は、親からz-index: 1;を削除することもできます。デフォルトでは

#parent { 
 
    position: relative; 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    /*z-index: 1;*/ 
 
} 
 

 
#child { 
 
    background: green; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    /*z-index: -1;*/ 
 
    transform: translateX(20px); 
 
}

<div id="parent"> 
 
    <p> 
 
    qqq 
 
    </p> 
 
    <div id="child" > 
 
    test 
 
    </div> 
 
</div>