html - float DIV 重叠不正确

Question

在下面的代码中，我希望 #nav div 与 #content div 重叠。尽管 #nav 具有更高的 z-Index 值，它仍然被 #content 覆盖。

fiddle :http://jsfiddle.net/Zfcba/

HTML:

<div id="page">
    <div id="nav"></div>
    <div id="content"></div>
</div>

CSS:

#page
{
    margin: 20px 0px;
    padding: 10px;
    display: block;
    width: 70%;
    height: 200px;
    border: 1px solid gray;
}

#nav
{
    float: left;
    width: 40px;
    height: inherit;
    border: 1px solid red;
    z-index: 999;
}

#content
{
    float: left;
    margin-left: -20px;
    width: 200px;
    height: inherit;
    border: 1px solid blue;
    background: lightgray;
    z-index: 0;
}

非常简单的代码，但我不明白我做错了什么。任何帮助将不胜感激。

注意:我在没有外部 div ( http://jsfiddle.net/Zfcba/1 ) 的情况下尝试了相同的方法。仍然是同样的问题。 :(

Answer 1

将此添加到您的 CSS 中

#above{position:absolute;}