`clip-path`는 CSS의 요소 스태킹 순서에 어떤 영향을 미치나요?

Clip-Path가 DOM에서 요소의 스택 순서에 영향을 미치는 방식

Clip-path는 클리핑 영역을 생성하는 CSS 속성입니다. 요소 콘텐츠의 어느 부분이 표시되는지 정의합니다. 그러나 스택 순서에 예상치 못한 영향을 미치며 DOM에서 클립 경로가 있는 요소 아래에 요소를 나중에 배치합니다.

문제 원인

이는 다음과 같은 이유로 발생합니다. , CSS 사양에 따르면 0이 아닌 클립 경로 값을 사용하면 스택 컨텍스트가 생성됩니다. 스태킹 컨텍스트는 요소가 Z-인덱스에 따라 렌더링되고 계층화되는 3차원 공간입니다.

클립 경로의 경우 클립 경로가 있는 요소는 새로운 스태킹 컨텍스트에 배치됩니다. , 명시적인 위치 지정이 없는 후속 요소는 원래 스택 컨텍스트에서 렌더링됩니다. 즉, 클립 경로가 있는 요소는 나중에 DOM에 나타나더라도 명시적인 위치 지정 없이 요소와 겹칩니다.

문제 해결

이 문제를 해결하려면 클립 경로가 있는 요소의 위치를 ​​"상대" 또는 "절대"로 명시적으로 설정할 수 있습니다. 그러면 해당 요소가 클립 경로에 의해 생성된 새 스택 컨텍스트로 이동됩니다. 이렇게 하면 나중에 DOM의 요소가 클립 경로가 있는 요소 위에 유지됩니다.

예

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

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

h1 {
  margin: 0;
  padding: 2em;
  font: 300%;
  color: white;
  text-align: center;
}

section {
  background: #ccc;
  padding-top:5em;
  margin-top:-5em;
}

img {
  margin-top: -10em;
}

처음에는 헤더의 클립 경로로 인해 이미지가 헤더 뒤에 숨겨져 있습니다. 이미지에 "위치: 상대"를 설정하면 헤더와 동일한 스태킹 컨텍스트로 이동하여 그 위에 표시됩니다.

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

결론

클립 사용 -path는 후속 요소의 스택 순서에 영향을 미치는 스택 컨텍스트를 만듭니다. 올바른 레이어링을 보장하려면 클립 경로가 있는 요소의 위치를 ​​"상대" 또는 "절대"로 명시적으로 설정하거나 다른 기술을 사용하여 요소 겹침을 제어하는 ​​것을 고려하세요.

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