z-index IE에서의 미혹 (2)

IE 내 z-index BUG
먼저 예시된 코드 부분을 살펴보자.
XHTML 섹션:

<div id="container">
        <div id="box1">  box     </div>
</div>
<div id="box2">  box     ，IE               stacking context ，      z-index  “auto”。</div>

CSS 섹션:

#container {
        position: relative;
}
#box1 {
        position: absolute;
        top: 100px;
        left: 210px;
        width: 200px;
        height: 200px;
        background-color: yellow;
        z-index: 20;
}
#box2 {
        position: absolute;
        top: 50px;
        left: 160px;
        width: 200px;
        height: 200px;
        background-color: green;
        z-index: 10;
}

두 box는 완전히 포지셔닝되었다. 배경색이 노란색인 box1은 z-index 속성 값 20을 가지고 있고 배경색이 녹색인 box2는 z-index 속성 값 10을 가지고 있다. 유일한 차이점은 배경색이 노란색인 box1은 속성position:relative를 정의한div에 놓여 있고 문서 원본 코드에서 상위권에 있다는 것이다.
상기 코드와 z-index의 속성 소개에 따라 위 코드가 발생할 효과 위치를 분석합니다.
4CSS specification 루트 요소를 제외하고 포지셔닝 요소의 z-index가 auto가 아닌 z-index 값으로 정의되어야만 새로운 Stacking context가 생길 수 있음을 명확하게 규정했다.예를 들어 상대적으로 포지셔닝된 요소는 z-index, 즉 z-index를 기본값인 auto로 정의하지 않았다.그래서 이치대로라면 그는 하위 원소의 겹치는 순서에 영향을 주지 않을 것이다.즉, 배경색이 노란색인box1과 배경색이 녹색인box2의stackingcontext가 같고, 모두 루트 요소로 생성된rootstackingcontext이다.다시 규칙에 따라 Stacking context와 같을 때 z-index의 값으로 어떻게 표시되는지 결정하는 원리는 z-index 속성 값 20의 배경색이 노란색인box1이z-index 속성 값 10의 배경색이 녹색인box2 위에 있어야 한다.
다음은 Firefox와 IE에서 각각 최종 효과를 테스트한 결과 Firefox에 나타난 효과와 위에서 분석한 효과는 완전히 일치하지만 IE에 나타난 효과는 일치하지 않는다는 것을 발견할 수 있다.
미혹:IE의 z-index 속성 값 10 배경색이 녹색인 box는 z-index 속성 값 20의 배경색이 노란색인 box1에 있는데 우리가 분석한 결과와 완전히 일치하지 않습니다. 왜요?
해혹: 사실 이것은 IE 브라우저 (윈도우즈) 의 BUG입니다. IE 브라우저에서 포지셔닝 요소는 새로운 Stacking context를 생성하고 z-index의 값은 0부터 시작합니다.
이제 위에서 설명한 IE의 디스플레이 논리를 이해합시다.상대적으로 포지셔닝된container를 설정하여 새로운 Stacking context를 생성합니다. 따라서 포지셔닝된 하위 요소의 배경색이 노란색인box1은 이 새로운 Stacking context를 참고하여 겹치는 순서를 결정합니다.배경색이 녹색인 box2는 배경색이 노란색인 box1의 부모 요소인 container와 같은 Stacking context이기 때문에 그들 사이에는 z-index에 따라 겹치는 순서를 결정한다. 즉, z-index 속성 값 10 배경색이 녹색인 box2는 z-index 속성 값 0의 container 위에 있다.
사실 이 BUG의 영향 범위는 매우 넓지만, 모두가 평소에 그다지 주의하지 않는다.다음은 가장 흔히 볼 수 있는 상황인 z-index의 마이너스 값 해석을 설명한다. 많은 친구들은 이 BUG의 존재 때문에 IE가 z-index의 마이너스를 지원한다고 독단적으로 생각하지만 FF는 z-index의 마이너스를 지원하지 않는다.
예를 들면 더 형상적으로 표현할 수 있을지도 모른다.
XHTML 섹션:

<body>
        <div id="container">
                <div id="box1">            IE   Firefox        ？Why？</div>
        </div>
</body>

CSS 섹션:

#container {
        position: relative;
}
#box1 {
        position: absolute;
        top: 100px;
        left: 210px;
        width: 200px;
        height: 200px;
        background-color: yellow;
        z-index: -10;
}

Firefox 아래에서는 배경색이 노란색인 box1이 사라지고IE 아래에는 표시되는 것을 발견할 수 있습니다.이것도 내가 위에서 말한 바와 같이 일부 친구들은 IE가 z-index의 마이너스를 지원하고 FF가 z-index의 마이너스를 지원하지 않는다고 독단적으로 생각하는 이유이다.우리는 현상을 통해 본질을 보아야 한다.
이전 예에서 분석한 바와 같이 상대적인 위치(position:relative)의 요소를 설정했지만 auto가 아닌 z-index를 제시하지 않으면 Stacking context가 생기지 않고 하위 요소의 겹치는 순서에 영향을 주지 않는다.그래서 배경색이 노란색인box1의stackingcontext는 루트 요소로 생성된rootstackingcontext입니다.지난 절에서 우리는'이 속성이 지정되지 않은 포지셔닝 대상에 대해 z-index 값이 정수인 대상은 그 위에 있고 z-index 값이 음수인 대상은 그 아래에 있다'고 말했다. 규칙에 따라 z-index 값이 -10인 노란색 box1은 z-index 속성이 지정되지 않은 요소(예를 들어 바디) 아래에 나타날 것이다.그래서 Firefox에서 배경색이 노란색인 박스1이 사라졌어요.IE에 상대적인 위치를 설정한 container는 z-index 값 0을 가지고 새로운 Stacking context를 생성하고 배경색이 노란색인box1을 새 Stacking context 내부에 겹치는 순서를 가지기 때문에 IE에서 표시됩니다.
그러나 여기에 또 하나의 문제가 있다. 위의 코드에 대해 우리는 다시 한 번 간략하게 하자.
XHTML 섹션:

<body>
        <div id="box1">            IE   Firefox        ？Why？</div>
</body>

CSS 섹션:

#box1 {
        position: absolute;
        top: 100px;
        left: 210px;
        width: 200px;
        height: 200px;
        background-color: yellow;
        z-index: -10;
}

위에서 간략하게 표시하지 않은 코드와 일치하는 것을 발견할 수 있을 것이다.하지만 위의 이해로는 IE에서 해석이 불가능할 수도 있다.이때 배경색이 노란색인box1을 이해하는 Stacking context는Firefox에서든 IE에서든 루트 요소에서 만들어진root stacking context이기 때문이다.
미혹: IE 브라우저에서는 규칙대로 배경색이 노란색인 박스1도 사라져야 하는데, 그렇지 않습니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

과제리뷰_1만 시간의 법칙

11월 11일 📍어제의 수업 과제 였던 1만시간의 법칙 리뷰 1. 폰트 이번에 했던 1만시간의 법칙은 총 4개의 폰트가 필요했다. 일반적으로 300kb를 넘으면 크다고 생각한다. 폰트는 보통 2개정도 사용한다. 이미...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

z-index IE에서의 미혹 (2)

좋은 웹페이지 즐겨찾기