'clip-path'가 HTML 요소의 스택 순서를 변경하는 이유는 무엇입니까?

Clip-Path가 스택 순서를 수정하는 이유: 심층 분석

CSS 세계에서는 요소의 스택 순서를 다루는 경우가 많습니다. , 코드에서 더 위쪽에 위치한 요소는 일반적으로 아래에 있는 요소 위에 그려집니다. 그러나 클립 경로와 같은 특정 속성은 예상되는 스택 순서를 방해하여 예상치 못한 결과를 초래할 수 있습니다.

다음 CSS 코드를 고려하세요.

header {
  background: #a00;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
}

제목에 적용할 때(

), 이 코드는 클립 경로를 사용하여 사용자 정의 모양을 정의합니다. 그러나 이미지가 이 제목 아래에 위치하면 예상치 못한 동작이 발생합니다. 코드에서 나중에 위치하기 때문에 시각적으로 헤더 위에 나타나야 하는 이미지는 헤더 아래에 표시됩니다.

이 동작을 이해하려면 CSS 불투명도와 유사한 클립 경로가 새로운 스태킹 컨텍스트. CSS에서 정의한 페인팅 순서에서 스택 컨텍스트를 생성하는 요소는 위치 지정되지 않은 요소 앞에 배치됩니다.

8. All positioned, opacity or transform descendants, in tree order that fall into the following categories:

 - All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
 - All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.
 - All transform descendants with transform other than none, in tree order, create a stacking context generated atomically.

이 예에서 클립 경로 속성이 있는 요소는 8단계에서 페인팅되고 이미지는 위치 지정이 없는 는 4단계에서 그려집니다. 코드 후반부에 표시됨에도 불구하고 이미지는 다음에 의해 생성된 스택 컨텍스트로 인해 잘린 헤더 앞에 그려집니다. 클립 경로.

이를 수정하려면 이미지에 위치:상대적을 명시적으로 정의할 수 있습니다. 이렇게 하면 이미지가 배치되어 잘린 헤더와 동일한 스택 컨텍스트에 배치됩니다. 그런 다음 트리 순서에 따라 이미지가 헤더 위에 렌더링되는지 결정됩니다.

img {
  margin-top: -10em;
  position:relative;
}

결론적으로 클립 경로는 CSS 불투명도와 마찬가지로 스택 컨텍스트를 설정하여 요소의 그리기 순서에 영향을 줍니다. 이러한 개념을 이해함으로써 스태킹 동작을 제어하고 원하는 시각적 결과를 얻을 수 있습니다.

위 내용은 'clip-path'가 HTML 요소의 스택 순서를 변경하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!