Question

我有两个元素，一个用于header，另一个用于navbar 我想应用z-index属性将header放在顶部，然后放在底部的navbar。

HTML

<div id="main">
    <div id="header"><h2 id="logo">Logo</h2></div>
    <div id="navBar"><span>x</span></div>
</div>

CSS

div#header {
    height:70px;
    background-color:#fff;
    border-bottom:1px solid rgba(0, 0, 0, 0);
    box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1);
    z-index:20;
}
div#navBar {
    height:50px;
    padding-right:240px;
    line-height:45px;
    background:yellow;
    z-index:21;
}
div#header #logo {
    position:relative;
    right:-20px;
    bottom:-20px;
}

您还可以看到demo on jsfiddle

为什么会出现此问题？
如何解决？

Answer 1

要使z-index起作用，您需要在这些元素上设置位置：绝对，相对等

Answer 2

你的意思是导航栏上方出现标题文字？也许您可以尝试将标题div标记移动到导航栏div标签的开头。

Answer 3

如果你只是切换z-indices就可以了。较低的指数意味着底部底部元素的索引较大。更改21到19.此外，您需要定位（将position属性设置为静态以外的任何值，在这种情况下您可能需要相对）您想要给z-index的任何内容。

div#header {
    position: relative
    height:70px;
    background-color:#fff;
    border-bottom:1px solid rgba(0, 0, 0, 0);
    box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1);
    z-index:20;
}
div#navBar {
    position: relative
    height:50px;
    padding-right:240px;
    line-height:45px;
    background:yellow;
    z-index:19;
}
div#header #logo {
    position:relative;
    right:-20px;
    bottom:-20px;
}

为什么z-index在这种情况下不适用

3 个答案: