Created
May 16, 2016 02:27
-
-
Save kjirou/175cde1fa699133a1a0d16e2d4c81bf3 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 を 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 を下げる
が正しい検証方法。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
div.contentが「スタックコンテキスト」を作らないので、pulldownもmodalも「ルートのスタックコンテキスト」に乗っているのではないでしょうか。
div.contentを「position: static以外」にすると、挙動が変わるのだと思います。