Internet Explorer 7에서 Z-Index 동작이 다른 이유는 무엇입니까?

IE7 Z-Index 계층화 문제: 포괄적인 이해

Internet Explorer 7(IE7)에는 z-index 속성과 관련하여 특이한 동작이 있습니다. , 웹 페이지에서 요소의 스택 순서를 결정하는 역할을 담당합니다. 이러한 동작은 특히 여러 개의 겹치는 요소로 작업할 때 예상치 못한 계층화 문제로 이어질 수 있습니다.

IE7의 Z-Index 문제는 무엇입니까?

IE7에서는 z -index 속성은 동일한 스택 컨텍스트 내의 요소에 상대적입니다. 그러나 대부분의 브라우저와 달리 IE7은 명시적으로 설정된 z-index 값 없이 위치가 지정된 요소에 대해 새로운 스택 컨텍스트를 생성합니다. 즉, Z-인덱스가 낮은 요소는 Z-인덱스가 다른 요소가 서로 다른 스택 컨텍스트에 속할 경우 Z-인덱스가 높은 요소와 겹칠 수 있습니다.

실용적 예

다음 HTML 및 CSS 코드 예시를 살펴보세요.

Input #1:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

이 예시에서는 메뉴(

요소)를 두 번째 엔벨로프와 겹칩니다. 그러나 IE7에서는 위치된 명시적인 Z-인덱스가 없으면 새로운 스택 컨텍스트가 생성됩니다.

가능한 해결 방법

이 문제를 해결하려면 두 가지 주요 접근 방식이 있습니다.

1. 상위 항목에 명시적 Z-색인 추가 요소:

   • 이렇게 하면 상위 요소의 모든 하위 요소(메뉴 포함)가 상위 요소의 모든 형제 요소와 겹치게 됩니다. 이 예에서 다음 CSS는 문제를 해결합니다.

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

2. 상위 요소에서 상대 위치 제거:

   • 가능하다면 상위 요소(예제에서는 )에서 position:relative 속성을 제거하여 새로운 스태킹 컨텍스트를 생성하지 마십시오. 이렇게 하면 메뉴가 두 번째 봉투와 자연스럽게 겹쳐집니다. 수정된 HTML 코드는 다음과 같습니다.

   
       <title>Z-Index IE7 Test</title>
       <style type="text/css">
           ul {
               background-color: #f00;
               z-index: 1000;
               position: absolute;
               width: 150px;
           }
       </style>
   
   
       <div>
           <label>Input #1:</label> <input><br>
           <ul>
               <li>item</li>
               <li>item</li>
               <li>item</li>
               <li>item</li>
           </ul>
       </div>
   
       <div>
           <label>Input #2:</label> <input>
       </div>
   
   

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