嵌套z索引与意外的结果分层的问题

描述：

当点击Click me按钮时，.list元件淡入上Menu按钮的顶部，尽管具有它的较低的Z指数值。我认为它与继承有关，但我已明确指定了更高的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; 
}

来源

2015-10-07 daveycroqet

删除的z-index header

来源

2015-10-07 06:15:01

嵌套z索引与意外的结果分层的问题

回答

相关问题