Skip to content

Instantly share code, notes, and snippets.

@otolab

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

Forked from kjirou/why-is-pulldown-over-modal.html
Last active May 16, 2016 05:26
Show Gist options
  • Save otolab/0bef13ba3ce07ce0eaceec1848a9709e to your computer and use it in GitHub Desktop.
Save otolab/0bef13ba3ce07ce0eaceec1848a9709e 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;
}
.layer1 {
position: absolute;
z-index: 2;
top: 120px;
left: 120px;
width: 500px;
height: 500px;
background-color: green;
}
.layer2 {
position: absolute;
z-index: 1;
bottom: 10px;
top: 10px;
right: 10px;
left: 10px;
width: 800px;
background-color: purple;
}
.background {
position: absolute;
z-index: 3;
bottom: 50px;
top: 50px;
left: 50px;
right: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<div class="layer1">
layer1<br>z-index: 2;
<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>
</div>
</div>
<div class="layer2">
layer2<br>z-index: 1;
<div class="background">background<br>z-index: 3;</div>
</div>
</body>
</html>
@otolab
Copy link
Author

otolab commented May 16, 2016

.layer1の上で、.pulldownと.modalはz-index値通りの順番を保っている。
.layer1と.layer2の前後関係は.layer1の方が手前なので、backgroundがz-index: 3であっても、.layer1の手前に来ることはない。
というサンプル。

@kjirou
Copy link

kjirou commented May 16, 2016

確かに！　ありがとうございます。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment