z-index なぜ .box1 .inner が .box2 より上にないのですか?
z-indexについてテストコードも含めて詳しく説明した記事はありますか？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>page title</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> <style type="text/css"> .box1,.box2,.box3,.inner{width:200px;height:200px;} .box1{background-color:red;position:relative;z-index:1;} .box2{background-color:green;position:relative;z-index:1;top:-30px;left:50px;} .box3{background-color:tan;} .inner{background-color:#3A80F3;position:absolute; left:20px;top:20px;z-index:1000;} </style> <div class="box1"> box1 z-index:1; <div class="inner">box1 inner z-index:1000</div> </div> <div class="box2">box2 z-index:1</div> <div class="box3"></div></body></html>
.inner このスタイルのposition:absoluteは機能しません。position:absoluteに変更してください。
.box1{background-color:red;あなたのbox1はbox2の下にあり、あなたの内部はbox1の中にあるので、box1のz-indexをbox2より大きくするか、内部をデタッチすることしかできません。そうでなければ、とても悲しいです
異なるスタッキング コンテキストでは、要素の表示順序は、親のスタッキング コンテキストのスタック レベルによって決まります。
したがって、inner は box2 と比較するときに box1 のレベル値を使用します この記事を参照できます
http://www.blueidea.com/tech/web/2008/5975.asp
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
