飄來的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

z-index僅適用於absolute定位的元素。當瀏覽器會忽略z-index價值，那麼它會呈現在元素都在您的訂單HTML-代碼。由於#content後來是在你的代碼比#nav，#content將顯示在#nav。

Answer 2

添加到您的CSS

#above{position:absolute;}