클립 경로가 요소 스택 순서에 영향을 미치는 이유는 무엇입니까?

클립 경로로 스택 순서가 변경되는 이유

요소에 클립 경로가 적용되면 불투명도가 스택 순서에 영향을 미치는 방식과 유사하게 새로운 스택 컨텍스트가 생성됩니다. 1보다 작은 값. 이는 CSS 사양에 지정되어 있습니다. "없음 이외의 계산된 값은 동일한 방식으로 스태킹 컨텍스트를 생성합니다. CSS 불투명도는 1 이외의 값에 적용됩니다."

스택 순서는 페인팅 중에 결정됩니다. 다음 단계는 순서대로 발생합니다.

1. 위치, 불투명도가 1보다 작거나 없음 이외의 변형이 있는 요소는 새 스택 컨텍스트를 생성합니다.
2. z-index가 있는 위치에 있는 하위 항목: 자동 또는 z-index: 0은 상위 스태킹 컨텍스트에 배치됩니다.
3. 흐름 내에서 위치 지정되지 않은 하위 항목은 상위 스택 컨텍스트에 배치됩니다. 스태킹 컨텍스트.

제공된 예에서 클립 경로가 있는 요소는 1단계에서 그려지고 새 스태킹 컨텍스트를 생성합니다. 위치가 설정되지 않은 이미지 요소는 클립 경로 요소에 의해 생성된 스택 컨텍스트 이후 3단계에서 그려집니다.

이것이 이미지가 헤더 아래에 나타나는 이유입니다. 나중에 DOM 코드에 나타납니다.

해결책:

이 문제를 해결하려면 position:relative를 on으로 설정할 수 있습니다. 이미지 요소. 이렇게 하면 정상 위치를 기준으로 위치가 지정되므로 1단계에서 클립 경로 요소에 의해 생성된 스택 컨텍스트에 삽입됩니다. 결과적으로 이미지는 헤더 요소 위에 표시됩니다.

불투명도 예:

불투명도에서도 동일한 동작을 관찰할 수 있습니다. 헤더 요소의 불투명도가 1보다 작은 경우 새 스택 컨텍스트도 생성되며 이미지는 위치 속성 없이 그 아래에 표시됩니다.

위 내용은 클립 경로가 요소 스택 순서에 영향을 미치는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!