z-index IE에서의 매혹
6240 단어 z-index
z-index: auto | number auto: 기본값.number: 단위가 없는 정수 값입니다. 마이너스일 수 있습니다.
z-index 값이 비교적 큰 원소는 z-index 값이 비교적 작은 원소 위에 중첩된다.이 속성을 지정하지 않은 포지셔닝 대상에 대해 z-index 값이 정수인 대상은 그 위에 있고 z-index 값이 음수인 대상은 그 아래에 있다.
주의: 이 속성은 select 대상과 같은 창 컨트롤에 적용되지 않습니다.IE5.5+에서 iframe 대상이 이 속성을 지원하기 시작합니다.이전 브라우저 버전에서 iframe 대상은 창 컨트롤로 이 속성을 무시합니다.
z-index 속성은 포지셔닝 요소(position 속성 값은relative 또는 absolute 또는fixed의 대상)에 적용되며 포지셔닝 요소가 화면 방향(Z축)에 수직으로 겹치는 순서(stack order)를 정하는 데 사용됩니다.
모든 포지셔닝 요소는 Stacking context에 귀속됩니다.루트 요소는 root stacking context를 형성하고 다른 stacking context는 포지셔닝 요소로 생성됩니다. (이 포지셔닝 요소의 z-index는 auto가 아닌 z-index 값으로 정의됩니다.) 포지셔닝 서브 요소는 이local stacking context를 참고하여 같은 규칙으로 겹치는 순서를 결정합니다.또한 Stacking context와 containing block 사이에는 필연적인 관계가 없다.
Stacking context가 같을 때 z-index의 값으로 어떻게 표시할지 결정하고, z-index도 같을 경우(즉 Stack level이 같을 경우) 파일의 뒷사람이 위에 있는 원칙(back-to-front)의 순서에 따라 겹친다.
어떤 원소가 다른 Stacking context 원소를 겹칠 때, Stacking context의 겹침 단계 (Stack level) 로 표시의 선후 상황을 결정합니다.즉, 같은 Stacking context에서 z-index로 선후를 결정하고, 서로 다른 경우 Stacking context의 z-index로 결정한다.예를 들면 다음과 같습니다.
포지셔닝 요소 A(z-index:100)에는 포지셔닝 요소 A1(z-index:300)이 있고 포지셔닝 요소 B와 요소 A 형제 관계(z-index:200)가 있다.A1의 z-index가 아무리 크더라도 z-index가 200인 B에 덮여 있는 것을 발견할 수 있다. 왜냐하면 A의 z-index는 100밖에 없기 때문이다.
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의 속성 소개에 따라 위 코드가 발생할 효과 위치를 분석합니다.
CSS 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도 사라져야 하는데, 그렇지 않습니다.
해혹: IE 브라우저가 바디 요소에 기본적으로 Stacking context를 생성한 것 같습니다.자세히 보기《원소층첩급(stack level) 및z-index 분석》
위의 두 가지 간단한 예를 통해 저는 여러분들이 왜 마이너스 값의 z-index가 IE와 Firefox에서 해석이 다른지 대충 아실 거라고 생각합니다. Firefox가 지원하지 않는 것이 아니라 IE의 BUG입니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
