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 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