问题描述:
当点击 Click me
按钮时,.list
元素淡入到 Menu
按钮的顶部,尽管它有一个较低的 z-index 值。我假设它与继承有关,但我已经为 .keep-on-top
元素明确指定了更高的 z-index 值,所以我对我看到的行为感到困惑。
期望的结果:
我希望 .list
元素(即黑框)淡入菜单按钮下方但在蓝色 .header-color
div 上方。我欢迎任何解决方案。
代码:
HTML:
<div class="header">
<div class="header-color"></div>
<div class="keep-on-top"><button>Menu</button></div>
</div>
<div class="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<br/><br/><br/><br/><br/><br/>
<button>Click me!</button>
CSS:
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 2;
}
.header-color {
background-color: #0099cc;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 1;
}
.keep-on-top {
position: absolute;
color: #fff;
z-index: 4;
}
.list {
background-color: #000000;
position: absolute;
z-index: 3;
color: #fff;
display: none;
}
最佳答案
从类 header
中移除 z-index
关于javascript - 具有意外结果的嵌套 z-index 分层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32984930/