Z- 색인 : Divs 여전히 잘못된 순서로 겹칩니다 (브라우저 단위)

Question

#header div의 나머지 색인보다 z- 색인이 더 높지만 해당 dropdrown 링크 중 하나를 선택할 수 없습니다. 모든 관련 div가 동일한 레벨에 있지만 적절하게 정렬되지 않는다 :

http://img32.imageshack.us/img32/4245/zindex.png

 <div id="header"> 
      <div id="navigation"> 
      </div> 
    </div> 
    <div id="sidebar"></div> 
    <div id="content"> 
          ... 
    </div> 


#header { 
width: 915px; 
height: 76px; 
z-index: 5; 
} 
#content { 
width: 677px; 
height: 412px; 
margin-left: 202px; 
z-index:1; 
} 

#sidebar { 
    float: left; 
    width: 200px; 
    height: 448px; 
    z-index: 2; 
} 

#navigation { 
    height: 28px; 
    width: 915px; 
    float: right; 
} 

Answer 1

z- 색인을 준수해야하는 요소와 관련된 위치를 추가하십시오. (: 절대 총수 : 상대적 또는 위치 : 고정 위치)에서 w3schools.com

Z- 색인은 위치 요소에 작동한다.

내 이미지에서 볼 때 드롭 다운 내비게이션 이외의 Z- 인덱스를 사용하는 이유는 없습니다.

Answer 2

z-index에만 배치 (즉 position: /* not static */) 요소에 적용된다.

위치 지정 특성 valud를 변경하십시오.