-
-
Save kjirou/175cde1fa699133a1a0d16e2d4c81bf3 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| background-color: #eee; | |
| } | |
| .content { | |
| width: 300px; | |
| height: 300px; | |
| background-color: #ff0000; | |
| text-align: right; | |
| } | |
| .content .pulldown { | |
| position: absolute; | |
| top: 180px; | |
| left: 20px; | |
| z-index: 2; | |
| width: 100px; | |
| height: 150px; | |
| background-color: #ffff00; | |
| } | |
| .modal { | |
| position: absolute; | |
| top: 200px; | |
| z-index: 1; | |
| width: 400px; | |
| height: 200px; | |
| background-color: #0000ff; | |
| text-align: right; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="content"> | |
| content<br>z-index: auto; | |
| <div class="pulldown">pulldown<br>z-index:2;</div> | |
| </div> | |
| <div class="modal">modal<br>z-index:1;</div> | |
| </body> | |
| </html> |
div.contentが「スタックコンテキスト」を作らないので、pulldownもmodalも「ルートのスタックコンテキスト」に乗っているのではないでしょうか。
div.contentを「position: static以外」にすると、挙動が変わるのだと思います。
おーなるほど！って思ったけど違う挙動になってしまいました
- div.content を position: static以外にしてみた・・・が、変わらず
- z-index も付けると変わる
↑の例だと、ルートスタックコンテスストに所属したままでして、その通りみたいでした。
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
位置指定されていて（absolutely か relatively）、z-index 値が "auto" 以外の要素
DOMの階層構造が異なる場合に、
それを超えて同じスタックコンテキストに所属する可能性があるのが「ルートスタックコンテクスト」だけで、
その場合のみ、階層構造を無視して上下させることも出来るということか。
@otolab あざっした！
それを超えて同じスタックコンテキストに所属する可能性があるのが「ルートスタックコンテクスト」だけで、
その場合のみ、階層構造を無視して上下させることも出来る
そうでも無いらしい
https://gist.github.com/otolab/0bef13ba3ce07ce0eaceec1848a9709e
上記例の通り、ルートに限らなかった。
「スタックコンテキスト未指定の場合は、親要素のスタックコンテキスト階層で勝負する」
とだけ覚えとくと良さそう。
z-indexのデバッグをするときに、z-index属性を消すと、所属するスタッキングコンテキストが変わるので意図通りの検証ができないことがある。
例えば、
<div class="a" />
<div class="b">
<div class="c" />
</div>
.a {
z-index: 10;
}
.b {
z-index: 10;
}
.c {
z-index: 10;
}
で、「c が a の上に出ないようにデバッグする」場合、
- c の z-index 行を消す → b の z-index が残ってるので変わらず
- b の z-index 行を消す → c の z-index が残ってるので変わらず
で、あれれ？となる。この場合は
- b の z-index を下げる
が正しい検証方法。
この場合、親子関係を無視して pulldown が modal の上に表示される：
経験上も、前からこうなってた。
一方、この辺の日本語だけどマトモそうな資料を読むと、スタックコンテキストを超えて上下はしないようなことが
書いてある：z-indexのどういう仕組から、要素の親子関係を超えて表示が上下するんだろう？