Skip to content

Instantly share code, notes, and snippets.

@kjirou

kjirou/why-is-pulldown-over-modal.html

Created May 16, 2016 02:27
Show Gist options
  • Save kjirou/175cde1fa699133a1a0d16e2d4c81bf3 to your computer and use it in GitHub Desktop.
Save kjirou/175cde1fa699133a1a0d16e2d4c81bf3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
why-is-pulldown-over-modal.html
<!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>
@kjirou
Copy link
Author

kjirou commented May 16, 2016 •
edited
Loading

↑の例だと、ルートスタックコンテスストに所属したままでして、その通りみたいでした。

https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

位置指定されていて（absolutely か relatively）、z-index 値が "auto" 以外の要素

DOMの階層構造が異なる場合に、
それを超えて同じスタックコンテキストに所属する可能性があるのが「ルートスタックコンテクスト」だけで、
その場合のみ、階層構造を無視して上下させることも出来るということか。

@otolab あざっした！

@kjirou
Copy link
Author

kjirou commented May 16, 2016 •
edited
Loading

それを超えて同じスタックコンテキストに所属する可能性があるのが「ルートスタックコンテクスト」だけで、
その場合のみ、階層構造を無視して上下させることも出来る

そうでも無いらしい

https://gist.github.com/otolab/0bef13ba3ce07ce0eaceec1848a9709e

上記例の通り、ルートに限らなかった。

「スタックコンテキスト未指定の場合は、親要素のスタックコンテキスト階層で勝負する」

とだけ覚えとくと良さそう。

@kjirou
Copy link
Author

kjirou commented May 17, 2016

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