Internet Explorer 7에서 Z-Index 동작이 다른 이유는 무엇입니까?-CSS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-12-17 18:33:14

원래의

555명이 탐색했습니다.

Why Does Z-Index Behavior Differ in Internet Explorer 7?

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

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

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

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

실용적 예

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

<form>
  <label>Input #1:</label>
  <span>

로그인 후 복사

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;
}

로그인 후 복사

이 예시에서는 메뉴(

명시적인 Z-인덱스가 없으면 새로운 스택 컨텍스트가 생성됩니다.

가능한 해결 방법

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

상위 항목에 명시적 Z-색인 추가 요소:
- 이렇게 하면 상위 요소의 모든 하위 요소(메뉴 포함)가 상위 요소의 모든 형제 요소와 겹치게 됩니다. 이 예에서 다음 CSS는 문제를 해결합니다.
```
#envelope-1 {
    position: relative;
    z-index: 1;
}
```
로그인 후 복사

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

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

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00;
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>

로그인 후 복사

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