Floated DIVs overlapping incorrectly

Question

In the following code, I'd like the #nav div to overlap the #content div. Even though #nav has a higher z-Index value, it is still being overlapped by #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;
}

Pretty simple code, but I can't understand what I'm doing wrong. Any help would be appreciated.

Note: I tried the same without the outer div ( http://jsfiddle.net/Zfcba/1 ). Still the same problem. :(

Answer 1

将此添加到您的CSS

#above{position:absolute;}

Answer 2

z-index only works for absolute positioned elements. As the browser ignores the value for z-index , it will then render it in the order the elements are in your html-code. As #content is later in your code than #nav , #content will be displayed over #nav .