Плавающие DIVs перекрываются некорректно

Question

В следующем коде я хотел бы, чтобы div #nav перекрывал #content div. Несмотря на то, что #nav имеет более высокое значение z-индекса, он по-прежнему перекрывается #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;}