html - フローティング DIV が正しくオーバーラップしない

Question

#nav次のコードでは、 div を div にオーバーラップさせたいと思い#contentます。より高い z-Index 値があります#navが、まだ によってオーバーラップされてい#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;}