Internet Explorer 6 및 7에서 Div의 Z-Index 문제를 해결하는 방법은 무엇입니까?

Internet Explorer 6 및 7 Z-Index 문제

문제:

웹사이트에서 http://madisonlane.businesscatalyst.com, div#sign-post가 div#bottom 위에 표시되어야 함에도 불구하고 겹치지 않는 문제가 발생합니다. 또한 IE6에서는 div#bottom 상단에 198px가 추가로 나타납니다.

Z-Index 및 Stacking Context 이해

z-index 속성에 따라 레이어링이 결정됩니다. HTML의 요소. 그러나 IE6과 IE7에서는 표준 동작이 약간 다릅니다.

사양에 따르면 기본 위치 속성이 아닌 요소는 새로운 "스태킹 컨텍스트"를 생성합니다. 동일한 stacking context 내의 요소들은 z-index 값을 기준으로 비교되며, 값이 더 높은 요소가 맨 위에 나타납니다.

해당 웹사이트의 경우 IE6, IE7이 stacking을 생성하기 때문에 문제가 발생합니다. 명시적인 z-index 값이 없더라도 div#sign-post 및 div#bottom 모두에 대한 컨텍스트입니다. 결과적으로 문서 순서는 원하는 Z-색인 순서보다 우선합니다.

해결책:

문제를 해결하려면 다음 역할을 하는 상위 요소를 생성해야 합니다. div#sign-post 및 div#bottom 모두에 대한 "스택 상위"입니다. 이 요소에는 기본이 아닌 위치 속성(예: 상대 또는 절대)과 명시적인 Z-색인 값이 있어야 합니다.

이렇게 하면 div#sign-post 및 div#bottom의 순서가 올바른지 확인할 수 있습니다. 동일한 스태킹 컨텍스트 내에서 결정되며 원하는 Z-인덱스 우선순위가 설정됩니다.

위 내용은 Internet Explorer 6 및 7에서 Div의 Z-Index 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!