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

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

从 class header

中删除 z-index

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

Nested z-index layering with unexpected results

html

javascript

css

z-index