'위치: 상대'는 Z-색인 및 요소 스태킹 순서에 어떤 영향을 미치나요?

왜 position:relative; Z-Index에 영향을 미치나요?

예기치 않게 설정 위치: 상대; 요소의 Z-색인이 변경된 것처럼 보일 수 있습니다. 이는 그리기 순서로 알려진 스태킹 컨텍스트의 순서로 인해 발생합니다.

표준 그리기 순서

위치: 상대;가 없으면 요소는 순서대로 네 번째 단계에서 그려집니다.

1. 루트 요소
2. 인라인, 위치 지정되지 않음 하위 항목
3. 인라인 블록 하위 항목
4. 흐름 내, 위치 지정되지 않은, 블록 수준 하위 항목

위치로 그리기: 상대;

위치 추가: 상대; 요소에 위치를 지정하므로 이제 위치가 지정된 다른 요소와 함께 8번째 단계에서 그려집니다.

5. 인라인, 위치 지정되지 않은 인라인 블록 하위 요소
6. 인라인, 비 -위치 지정 요소의 위치 지정 후손
7. 인라인 블록의 위치 지정, 텍스트가 아닌 후손 요소
8. 트리 순서의 모든 위치, 불투명 또는 변환 하위 항목(z-색인 순서가 적용되지 않는 한)

둘 다 이후 이 경우 컨테이너와 마스크의 위치가 지정되고 z-인덱스가 지정되지 않으며 페인팅 순서는 트리 순서에 따라 결정됩니다. 기본적으로 마스크는 HTML에서 컨테이너 뒤에 배치되므로 나중에 그려집니다.

텍스트가 숨겨진 이유

원래 position:relative;가 없으면 제목 텍스트가 뒤에 숨겨집니다. 파란색 오버레이는 마스크가 이후 단계에서 칠해지기 때문입니다. 그러나 position:relative; 컨테이너에 적용되면 위치가 지정되므로 8단계에서도 페인트됩니다. 컨테이너는 HTML에서 마스크 앞에 배치되고 둘 다 지정된 Z-인덱스가 없으므로 컨테이너가 먼저 그려져 텍스트가 마스크 위에 표시됩니다.

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