Question

问题描述：

点击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;
}

Answer 1

从班级header

中删除z-index

嵌套的z-index分层具有意外结果

1 个答案: