HTML에서 Z-색인은 절대값인가요, 상대값인가요?

Z-Index: 절대 또는 상대?

웹 개발에서 z-index 속성은 HTML 요소의 스택 순서를 제어합니다. 그러나 다음과 같은 일반적인 질문이 제기됩니다. 요소의 z-index는 절대적인가요, 아니면 상대적인가요?

절대 Z-색인과 상대 Z-색인

z-index 속성은 3차원에서 요소의 위치를 ​​정의합니다. 형제자매에 비해. 전체 페이지의 3차원 레이아웃 내에서 요소의 위치를 ​​결정하지는 않습니다. 따라서 z-index는 요소의 상위 요소에 상대적입니다.

제공된 예에서:

<code class="html"><div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div></code>

#dHello는 상위 div 아래에 중첩됩니다. 더 높은 Z-색인(200)을 가짐에도 불구하고 뒤 #dDomination 뒤에 나타납니다. 후자의 형제 Z-색인이 100이기 때문입니다. 이는 Z-색인이 상위 div에 상대적이기 때문입니다.

표준 및 브라우저 변형

W3C는 z-index 속성을 상위 요소를 기준으로 정의합니다. 그러나 브라우저마다 구현 방법이 다를 수 있습니다.

1. 대부분의 브라우저에서 z-index는 상위 요소의 계산된 z-index에 상대적이며 일반적으로 0입니다.
2. Internet Explorer 6 이하에서 z-index는 문서 루트를 기준으로 했습니다.
3. ,** Safari 및 Chrome에서는 z가 동일한 요소 -index는 페이지 소스에서의 위치를 ​​기준으로 정렬됩니다.

시각화 예

다음 코드를 고려하세요.

<code class="html"><div id="X" style="z-index:1">
  <div id="Y" style="z-index:3"></div>
</div>
<div id="Z" style="z-index:2"></div></code>

처음에는 # Y는 Z-색인이 더 높기 때문에 #Z와 겹칩니다. 그러나 #Y는 #X(z-인덱스 1)의 자식이므로 #Z는 #X와 #Y 앞에 모두 표시됩니다.

위 내용은 HTML에서 Z-색인은 절대값인가요, 상대값인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!