'위치:상대적'이 Z-색인에 어떤 영향을 미치는 것 같나요?

Z-Index에 대한 위치:상대적; 효과 이해

특정 시나리오에서는 "위치: 상대적인;" 요소의 Z-색인이 수정되어 혼란을 초래하는 것으로 보입니다. 이 답변은 CSS 그리기 순서 사양을 참조하여 이 동작을 명확히 하는 것을 목표로 합니다.

CSS 그리기 순서

CSS 그리기 순서는 HTML 요소가 그려지는 순서를 나타냅니다. 화면에. 위치가 지정되지 않은 요소(즉, "position:absolute;" 또는 "position:relative;"가 설정되지 않은 경우)의 경우 HTML 마크업 순서대로 그려집니다(4단계). 그러나 위치가 지정된 요소(예: 제공된 코드 예제의 .mask)는 위치가 지정되지 않은 모든 요소(8단계) 이후에 나중에 그려집니다.

상대 위치 영향

위치:상대; 요소(예: .container)에 적용되면 일반 흐름을 기준으로 위치가 지정됩니다. 결과적으로 4단계 페인팅 순서에서 제거되고 대신 다른 위치의 요소와 함께 8단계에 속합니다.

주어진 코드에서 .mask는 8단계(절대적으로 위치 지정됨), .container(위치:상대적; 없음)는 4단계. 따라서 예상대로 .mask가 .container 앞에 나타납니다.

그러나 if position:relative; .container에 적용되면 8단계 페인팅 순서에도 해당됩니다. .mask와 .container는 모두 위치가 지정되어 있고 지정된 Z-색인이 없으므로 문서의 뒷부분에 나타나는 요소(예: .container)는 다른 요소(예: .mask) 위에 그려집니다.

결론

CSS 페인팅 순서를 이해하면 설정 이유가 명확해집니다. 위치:상대적; 컨테이너 요소의 Z-색인에 영향을 미치는 것처럼 보일 수 있습니다. 이 동작은 요소가 배치되어 나중에 렌더링 프로세스에서 그려지기 때문에 위치가 지정된 다른 요소에 비해 시각적 순서가 변경되기 때문에 발생합니다.

위 내용은 '위치:상대적'이 Z-색인에 어떤 영향을 미치는 것 같나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!