IE6과 7에서 내 Div 스태킹 순서가 다르게 동작하는 이유는 무엇입니까?

Internet Explorer 6 및 7 Z-Index 문제

문제:
두 개가 있는 웹 페이지에서 divs, div#sign-post는 div#bottom 위에 표시되어야 하지만 이는 Internet Explorer 이외의 브라우저에서만 발생합니다. (IE) 6 및 7. 또한 IE6은 div#bottom 상단에 추가로 198픽셀을 표시합니다.

해결책:

Z-Index 이해 IE6/7

대부분의 브라우저에서 z-index 속성은 할당된 값에 따라 요소를 다른 요소 위 또는 아래에 쌓을 수 있습니다. 그러나 IE6 및 7에서는 위치가 지정된 요소가 z-index 값에 관계없이 새로운 스택 컨텍스트를 생성합니다.

문제

이 경우 div#sign-post에는 div#bottom보다 z-인덱스가 더 높지만 IE6/7은 IE에서 위치 지정 요소 자체에 의해 생성되는 부모의 스택 컨텍스트를 비교합니다. div#sign-post와 div#bottom 모두 Z-색인 값을 명시적으로 설정하지 않았으므로 문서 순서에 따라 스택이 결정되어 div#bottom이 맨 위에 표시됩니다.

해결 방법:

이 문제를 해결하려면 영향을 받은 위치의 조상에 z-index 값을 할당해야 합니다. 요소.

1. 스태킹 컨텍스트를 생성하는 위치가 지정된 상위 요소를 식별합니다.
2. JavaScript 또는 CSS를 사용하여 이러한 상위 요소에 높은 z-index를 할당하여 원하는 스택 순서를 적용합니다.

예를 들어 div#parent에 div#sign-post가 포함된 경우 div#parent에 z-index 1000을 할당합니다. div#bottom 위에 배치합니다.

추가 IE6 문제

IE6에서 div#bottom 상단에 추가로 198픽셀이 있는 것은 내부 계산 때문입니다. 기본 여백. 이 문제는 div#bottom의 여백을 0px로 명시적으로 설정하여 해결할 수 있습니다.

위 내용은 IE6과 7에서 내 Div 스태킹 순서가 다르게 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!