`위치:상대`는 CSS의 Z-색인 및 요소 스태킹 순서에 어떤 영향을 줍니까?

"position:relative" 속성이 Z-Index 동작을 변경하는 이유

HTML 및 CSS에서 "position:relative" 속성은 요소 위치를 지정하는 데 자주 사용됩니다. 컨테이너 내에서. 그러나 특정 시나리오에서는 이 속성이 명시적으로 언급되지 않았음에도 불구하고 z-index에도 영향을 미치는 것처럼 보일 수 있습니다.

이 동작을 이해하려면 CSS 그리기 순서를 자세히 살펴볼 필요가 있습니다. CSS 사양에 따르면 요소는 다음 순서로 그려집니다.

1. 일반 흐름: 요소는 HTML 문서에 나타나는 순서대로 그려집니다.
2. 플로트: 플로팅 요소는 일반 요소 이후 트리 순서로 칠해집니다. flow.
3. 위치된 요소: "정적" 이외의 위치 값을 가진 요소는 부동 소수점 이후에 트리 순서로 그려집니다.
4. 유입 비위치 블록 elements: 이 요소들은 배치된 후 트리 순서로 그려집니다. 요소.
5. 절대 위치 요소: 위치가 "절대"인 요소는 일반 흐름, 부동 및 위치 지정 요소 다음에 트리 순서로 그려집니다.

기본적으로 , 명시적인 위치가 지정되지 않은 요소(예: "position:static" 또는 "position:absolute")는 "in-flow"로 간주되어 단계 중에 그려집니다. 4. 그러나 해당 요소의 상위 컨테이너에 "position:relative"가 지정되면 해당 요소는 위치 지정 요소가 되며 3단계에서 그려집니다.

주어진 예에서 ".container" 요소가 "위치:상대"가 없으면 "위치:절대"가 있는 ".mask" 요소가 5단계에서 해당 요소 위에 그려집니다(위치 지정 요소 뒤). 그러나 "position:relative"가 ".container"에 적용되면 위치 지정 요소가 되므로 3단계에서 그려집니다. 따라서 ".container"는 하위 항목과 함께 ".container" 앞에 그려집니다. .mask" 요소를 사용하면 텍스트 아래에 파란색 오버레이가 나타납니다.

DOM(Document Object Model)에서 요소가 그려지는 순서가 반드시 .mask의 순서와 일치하지는 않는다는 점에 유의하는 것이 중요합니다. 시각적으로 나타나는 것입니다. 지정된 Z-색인 값은 맨 위에 표시되는 요소를 결정할 때 우선적으로 적용됩니다. 단, z-index가 지정되지 않은 경우에는 위에서 설명한 페인팅 순서가 사용됩니다.

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