浮動DIV重疊不正確

Question

在下面的代碼中，我希望#nav div與#content div重疊。 即使#nav具有較高的z-Index值，它仍被#content重疊。

內容： 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;}

Answer 2

z-index僅適用於absolute定位的元素。 當瀏覽器忽略z-index的值時，它將按照元素在您的html代碼中的順序呈現它。 由於#content在代碼中比#nav ，因此#content將顯示在#nav 。