Internet Explorer 7에서 내 Z-색인이 작동하지 않는 이유는 무엇입니까?

IE7 Z-Index 계층화 문제: 스택 컨텍스트 딜레마

CSS 속성인 Z-index는 HTML 요소의 계층화를 허용합니다. 웹페이지에서. 그러나 Internet Explorer 7(IE7)은 Z-인덱스 레이어링에서 비정상적인 동작을 나타냅니다.

이 시나리오에서 개발자는 UL 목록에 높은 Z-인덱스(1000)를 설정하여 div와 겹치도록 했습니다. . 그러나 div는 UL 앞에 계속 표시되었습니다. 문제는 스택 컨텍스트에 대한 IE7의 해석에 있습니다.

스태킹 컨텍스트는 브라우저의 렌더링 프로세스에서 생성된 독립적인 레이어로, 여기서 z-index 값은 각 컨텍스트 내에서 별도로 평가됩니다. IE7은 CSS 사양에 다르게 명시되어 있더라도 명시적인 z-index가 없는 위치 지정 요소를 새로운 스택 컨텍스트를 생성하는 것으로 해석합니다.

문제를 해결하려면 위치 지정 범위 요소에 명시적인 z-index 값을 추가하세요.

#envelope-1 {
    position: relative;
    z-index: 1;
}

이것은 범위에 대한 새로운 스택 컨텍스트를 생성하고 UL 목록이 다음과 같이 div와 겹치도록 합니다. 의도한 것입니다.

또는 범위에 대한 위치:상대적 사용을 피하도록 문서를 다시 디자인하십시오. 이렇게 하면 별도의 스택 컨텍스트가 생성됩니다.

<div>
    <label>Input #1:</label> <input>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

스태킹 컨텍스트의 개념을 이해하고 IE7에서의 해석을 통해 개발자는 브라우저별로 불일치가 발생하는 경우에도 요소의 계층화를 효과적으로 제어할 수 있습니다.

위 내용은 Internet Explorer 7에서 내 Z-색인이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!