2010-08-21 10 views
6

IE7에서 이상한 문제가 있습니다. 여러 지점에서 위치가있는 DIV가 있습니다. 위치가있는 항목이있을 때마다 (가짜 드롭 다운) 절대 위치에 있습니다. 상대 위치는 다른 div를 통해 표시됩니다. 절대적 위치 항목 (I 상단에서 원하는 하나) 1000위치 : 위의 상대 위치 : 절대

http://skitch.com/louiswalch/dub5h/microsoft-windows-vista

+1

[IE z- 색인 상대 목록/절대 버그 목록] (0120-365-305) –

답변

22

의 Z- 인덱스 나는 당신을 의심 '을 가지고있는 동안

Relativly 위치 항목은 어떤 Z- 인덱스가 설정되어 있지 않습니다 이미 시도했지만, 상대적으로 배치 된 요소에 z-index을 설정합니다.이 요소는 절대 배치 된 요소의 첫 번째 테스트 인 z-index보다 낮습니다.

그래도 문제가 해결되지 않으면 두 요소가 모두 stacking context인지 확인해야합니다. IE에서는CSS 규칙을 요소에 적용 할 때마다 해당 요소 내에 새로운 스태킹 컨텍스트가 생성됩니다. 즉, z- 인덱스는 해당 요소의 하위 및 다른 스태킹 컨텍스트의 어린이에서만 올바르게 반영됩니다. 낮은 z- 인덱스가 여전히 위에 쌓일 수 있습니다.

귀하의 경우 드롭 다운과 버튼을 동일한 스태킹 컨텍스트 또는에 별도의 스태킹 컨텍스트를 생성하는 두 요소에 적용해야합니다.

+0

Ahh spot 그게 문제 야. 문제는 동일한 스태킹 색인에 넣을 수 있는지 잘 모르겠습니다. 그것은 사이트의 다른 장소에서 더 복잡한 레이아웃을 가지고 있으며 상대적 위치 지정을하는 요소는 DOM의 전체 레벨에서 발생합니다. 나는 위의 항목보다 낮은 Z- 색인을 통해 터지는 항목을 제공하려고 시도했지만 여전히 표시됩니다. "또는 별도의 스태킹 컨텍스트를 생성하는 두 요소에 Z- 인덱스 적용"은 무엇을 의미합니까? –

+7

무슨 뜻입니까? 두 개의 상위 요소를 '위치'집합 (두 개의 별도 스택 컨텍스트 생성)으로 찾아서 'z-index'를 설정해야합니다. 예를 들어, 버튼이'#content'라는 컨테이너에 중첩되어 있고 드롭 다운이'# header'에 있다면, #content {z-index : 1}와'#header {z-index : 2}'를 설정할 수 있습니다 . '# header'와'# content'가 같은 스태킹 컨텍스트에 있으면, 이것이 문제를 해결할 것입니다. – Pat