[CSS] z-index とスタックコンテキスト - Qiita

z-index を使って要素の重なりを制御するとき、何も考えずに適当に z-index: 100; などと指定したりしていませんか？ このあたりの仕組みをよく理解せずに z-index を濫用していると、いつか怪奇現象に見舞われてつらいことになるかもしれません。 怪奇現象の例 早速ですが、以下のコードを御覧ください。 <div class='boxes'> <div class='box1'> .box1 { z-index: 1 } </div> <div class='box2'> .box2 { z-index: 2 } <div class='box3'> .box3 { z-index: 0 } </div> </div> </div> .boxes { color: white; position: relative; } .boxes div { width: 10em; h