겹치는 Div의 배경이 콘텐츠 뒤에 나타나는 이유는 무엇입니까?

CSS 페인팅 순서 및 겹치는 요소 이해

주어진 시나리오에서 우리는 배경이 충돌하는 두 개의 div가 서로 겹치는 것을 관찰합니다. 그러나 특정 CSS 페인팅 순서 규칙으로 인해 겹치는 div는 기본 div의 배경과 콘텐츠 사이에서 미끄러집니다.

W3C의 CSS 페인팅 순서 문서에 따르면 스택 컨텍스트가 있는 요소의 하위 항목에 대한 페인팅 순서는 다음과 같습니다. (음수 마진으로 인해 겹치는 div가 있음)은 다음과 같습니다.

1. 음수에서 컨텍스트 스태킹 z-indices: 먼저, 음수 z-index를 가진 모든 하위 요소는 자체 스택 컨텍스트를 형성하고 내림차순으로 그려집니다.
2. In-flow 위치가 지정되지 않은 하위 요소: 다음 , 모든 유입 위치가 지정되지 않은 블록 수준 하위 항목(이 경우 두 번째 div 포함)은 트리에 그려집니다.
3. 유입 블록 수준 어린이의 배경과 테두리: 각 어린이 내에는 배경과 테두리가 그려져 있습니다. 이 단계에서는 겹치는 div의 배경이 그려집니다.
4. In-flow 위치 지정되지 않은 인라인 자식: 모든 블록 수준 자식을 그린 후 모든 인라인 요소와 해당 내용이 트리 순서로 그려집니다. .
5. 양수 z-인덱스에서 컨텍스트 스태킹: 마지막으로 양수 z-인덱스에서 컨텍스트 스태킹 z-인덱스는 오름차순으로 그려집니다.

겹치는 요소에 대한 의미

겹치는 div의 특정 문제는 두 번째 div의 배경(단계에서 3)은 텍스트 내용 앞에 그려집니다(4단계). 이로 인해 첫 번째 div의 콘텐츠와 배경 사이에 텍스트가 표시됩니다.

문제 해결

이 문제를 해결하려면 다음 방법 중 하나를 사용할 수 있습니다.

• 겹치는 div에 대해 양의 Z-색인을 설정합니다. 이렇게 하면 다음이 보장됩니다. 스택 컨텍스트는 첫 번째 div의 배경 뒤에 그려집니다.
• 겹치는 div에 CSS 위치:상대적 사용: 그러면 div와 그 하위 항목에 대한 새로운 스택 컨텍스트가 생성되어 다음을 수행할 수 있습니다. Z-색인을 사용하여 그림 순서를 제어합니다.
• 겹치는 div 위에 투명 레이어를 추가합니다. 이렇게 하면 겹치는 div의 배경을 우회하여 텍스트 콘텐츠를 "위" 레이어에 배치합니다.

위 내용은 겹치는 Div의 배경이 콘텐츠 뒤에 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!