CSS z-index는 HTML 요소의 스택 순서를 어떻게 제어합니까?-CSS 튜토리얼-php.cn

z-index 스택 순서 이해

z-index를 사용한 요소 위치 지정

위치 요소에 미치는 영향

스태킹 컨텍스트

스태킹 순서 규칙

스택 순서의 예

집

웹 프론트엔드

CSS 튜토리얼

CSS z-index는 HTML 요소의 스택 순서를 어떻게 제어합니까?

Mary-Kate Olsen

Dec 25, 2024 am 03:47 AM

How Does CSS z-index Control the Stacking Order of HTML Elements?

z-index 스택 순서 이해

z-index를 사용한 요소 위치 지정

CSS의 z-index 속성은 위치가 지정된 요소의 스택 순서를 결정합니다. . 구체적으로 3차원 평면의 깊이를 나타내는 Z축에서 어떤 요소가 다른 요소의 앞이나 뒤에 나타나는지 나타냅니다.

위치 요소에 미치는 영향

Z-지수는 오직 작동합니다. 정적(즉, 절대, 상대, 고정 또는 고정) 이외의 위치를 가진 요소에 적용됩니다. 정적 위치의 요소나 부동 소수점을 사용하여 배치된 요소에는 영향을 주지 않습니다.

스태킹 컨텍스트

스태킹 컨텍스트는 요소가 배치되고 Z-인덱스가 적용될 때 생성됩니다. 스택 컨텍스트 내에서 z-index 속성은 위치가 지정된 요소와 해당 하위 항목의 스택 순서를 설정합니다. 스택 컨텍스트는 한 컨텍스트의 요소가 다른 컨텍스트에 있는 요소의 스택 순서를 방해하지 않도록 방지합니다.

스태킹 순서 규칙

Z-인덱스가 지정되지 않은 요소의 스택 순서는 다음과 같습니다.

루트 요소의 배경 및 테두리
위치 지정되지 않음, 비부동 블록 요소
위치가 지정되지 않은 부동 요소
인라인 요소
위치가 지정된 요소

z-index 속성이 적용되면, 스태킹 순서가 수정되었습니다:

루트의 배경 및 테두리 요소
z-index가 0보다 작은 위치에 있는 요소
위치가 지정되지 않은 부동 블록 요소
위치가 지정되지 않은 부동 요소
인라인 요소
z-인덱스가 있는 위치 요소 0
z-index가 0보다 큰 위치에 있는 요소

스택 순서의 예

있거나 없는 혼합 형제

위치:

div.sibling-1의 위치: static 및 z-index: 0
div.sibling-2의 위치: 절대 및 z-index: 1

결과: div.sibling-2가 앞에 나타납니다. div.sibling-1은 z-지수가 더 높기 때문입니다.

형제

와 중첩된

div.container에는 position: static 및 z-index:가 있습니다. 0
- div.child-1의 위치: static 및 z-index: 0
- div.child-2의 위치: 절대 및 z-index: 1
div.sibling의 위치는 상대 및 Z-색인입니다. 2

결과: div.sibling은 다른 스택 컨텍스트에서 더 높은 Z-색인으로 배치되므로 두 하위 div 앞에 나타납니다.

위 내용은 CSS z-index는 HTML 요소의 스택 순서를 어떻게 제어합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.