왜 '위치: 상대'가 'z-index'처럼 스태킹 순서에 영향을 미치는 것 같나요?

귀하의 코드가 Z-Index 유사 동작을 나타내는 이유

마크업에서 .container 요소의 위치는 상대입니다. 겉보기에는 z-index의 효과를 모방한 것 같습니다. 이 동작은 CSS 그리기 순서에서 비롯됩니다.

칠 순서 및 위치 지정

CSS 사양은 레이어가 화면에 그려지는 순서를 지정합니다. position:relative가 없으면 .container 요소는 "in-flow"이고 페인팅 순서의 4단계에서 페인팅됩니다.

반대로 position:relative를 추가하면 .container가 "위치 지정"되어 아래에 속합니다. 그림 순서 8단계.

나무 순서 그림

각각 내 페인팅 단계에서 요소는 "트리 순서"로 페인팅됩니다. 귀하의 경우 .container 및 .mask 요소는 모두 위치 지정 요소입니다. 둘 다 명시적인 Z-인덱스 값이 없으므로 트리 순서에 따라 맨 위에 칠할 항목이 결정됩니다.

요소 재정렬

초기 마크업에서 .mask 요소는 계층 구조에서 .container 뒤에 나타납니다. 따라서 두 요소가 모두 배치되면 .mask가 마지막에 그려져 .container를 덮습니다.

그러나 .container가 .mask 뒤에 오도록 요소의 순서를 변경하면 두 요소 모두 8단계에서 그려집니다. , 여전히 트리 순서입니다. 이 시나리오에서는 .container가 마지막으로 그려지며 앞서 관찰한 "z-index 동작"이 제거됩니다.

위 내용은 왜 '위치: 상대'가 'z-index'처럼 스태킹 순서에 영향을 미치는 것 같나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!