Question

我在标题，横幅和菜单上有一个基本设计。菜单放入标题块，标题使用相同的z-index与标题位于同一层。无论我设置到菜单的z-index的数量有多大而且大于横幅，菜单仍然在横幅后面。下面是我申请的代码，如何始终使菜单始终位于任何图层之上？

演示可以从http://jsfiddle.net/yckelvin/s0690n29/

找到

HTML

<div class="header">Header Area
    <div class="menu">Menu Area</div>
</div>
<div class="banner">Banner</div>

CSS

div {
    display: block;
    position: relative;
    height: 100px;
    width: 100px;
}
.header {
    z-index: 10;
    width: 100%;
    background-color: rgba(255, 0, 0, 0.5) !important;
}
.menu {
    background-color: rgba(0, 255, 0, 0.5);
    margin-top: 20px;
    margin-left: auto;
    margin-right: 5%;
    height: 300px;
    z-index: 20;
}
.banner {
    background-color: rgba(0, 0, 255, 0.8);
    margin-top -10px;
    width: 100%;
    z-index:10;
}

Answer 1

您必须为标题设置z-index大于banner：

div {
    display: block;
    position: relative;
    height: 100px;
    width: 100px;
}
.header {
    z-index: 20; /* change this */
    width: 100%;
    background-color: rgba(255, 0, 0, 0.5) !important;
}
.menu {
    background-color: rgba(0, 255, 0, 0.5);
    margin-top: 20px;
    margin-left: auto;
    margin-right: 5%;
    height: 300px;
    z-index: 20;
}
.banner {
    background-color: rgba(0, 0, 255, 0.8);
    margin-top -10px;
    width: 100%;
    z-index:10;
}

http://jsfiddle.net/s0690n29/1/

如何使内部块始终位于其他层的顶部？

1 个答案: