Z-Index가 IE 6과 IE 7에서 다르게 동작하는 이유는 무엇입니까?

IE 6 및 IE 7 Z-Index: 스태킹 컨텍스트 이면

IE 6 또는 IE 7로 작업할 때 예상치 못한 문제가 발생할 수 있습니다. z-index 속성을 사용하여 요소를 쌓으려고 할 때의 동작입니다. 문제를 이해하려면 CSS의 "스태킹 컨텍스트" 개념을 깊이 파고드는 것이 중요합니다.

스태킹 컨텍스트

CSS 사양에 따르면 z-index 컨트롤은 동일한 "스태킹 컨텍스트" 내 요소의 스택 순서. 스택 컨텍스트는 요소에 자동이 아닌 위치(절대, 고정 또는 상대)와 지정된 Z-인덱스 값이 있을 때 설정됩니다.

IE의 스택 이상

IE 6과 IE 7은 배치된 요소(명시적으로 지정된 z-인덱스가 없는 요소도 포함)가 암시적으로 새로운 스택 컨텍스트를 생성한다는 점에서 다른 브라우저보다 돋보입니다. 이 동작은 CSS 사양에서 벗어납니다.

Z-Index 동작에 미치는 영향

IE 6 및 IE 7에서 두 요소에 z-index가 설정된 경우 비교는 스태킹 순서를 결정하는 것은 스태킹 부모(일반적으로 위치적으로 비정적 조상) 수준에서 발생합니다. 이러한 상위 항목에 지정된 Z-인덱스가 없으면 문서 순서에 따라 스택이 지정됩니다.

해결 방법

이 문제를 해결하려면 스택 상위 항목에 대한 Z-인덱스 값을 명시적으로 설정하십시오. 올바르게 쌓고 싶은 요소. 낮은 상위 항목에서 시작하여 중첩 계층 구조 위로 작업하여 적절한 순서를 보장하기 위해 감소하는 z-index 값을 할당합니다.

IE 6 및 IE 7에서 스택 컨텍스트 동작을 이해하면 z-index 값을 효과적으로 조작할 수 있습니다. -예상치 못한 결과 없이 원하는 스태킹 결과를 얻을 수 있는 인덱스 속성입니다.

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