플로팅 DIV가 잘못 겹칩니다.

Question

다음 코드에서 #nav div가 #content div와 겹치도록하겠습니다. #nav의 Z- 색인 값이 더 높더라도 여전히 #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

z-index. 브라우저가 z-index의 값을 무시로, 그 다음 요소가 당신에있는 순서, HTML에서 렌더링됩니다 코드입니다. #content으로 #nav보다 나중에 코드에서이다, #content이 #nav을 통해 표시됩니다.이처럼

Answer 2

은 CSS이 추가 만 absolute 위치 요소 작동

#above{position:absolute;}