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

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 起作用，您需要在这些元素上设置position:absolute、相对等。