HTML 콘텐츠가 겹쳐도 기본 배경이 가려지지 않는 이유는 무엇입니까?

콘텐츠 겹침 문제의 원인은 무엇인가요?

HTML/CSS에서 두 요소가 겹칠 때, 겹친 요소의 배경에 콘텐츠가 항상 가려지는 것은 아닙니다. 이는 CSS 렌더링 모델에 지정된 특정 페인팅 순서 때문에 발생합니다.

CSS 페인팅 순서

CSS 페인팅 순서는 웹 페이지에서 요소가 시각적으로 렌더링되는 순서를 결정합니다. 이는 어떤 콘텐츠 레이어를 먼저 칠할지 지정하는 일련의 규칙으로 정의됩니다. 간략한 개요는 다음과 같습니다.

1. 루트 요소의 배경: 루트 요소()의 배경색은 전체 캔버스를 덮습니다.
2. 하위 요소의 배경: 하위 요소가 블록 요소인 경우(예:
   ), 배경 색상과 이미지는 루트 요소의 배경 위에 그려지며 요소의 전체 너비와 높이를 덮습니다.
3. 테두리: 하위 요소의 테두리 요소는 배경 위에 그려집니다.
4. 텍스트 내용: 마지막으로 하위 요소의 텍스트 내용이 그려집니다.

제공된 예의 문제

주어진 예에는 두 가지 요소가 있습니다.

1. .box: A < ;div> 빨간색 배경.
2. .bottom: 또 다른
   녹색 배경과 음수 여백이 적용되어 .box가 겹칩니다.

   채색 순서에 따라:

   1. 먼저 칠해져 전체 페이지를 덮게 됩니다.
   2. 다음에 .box의 빨간색 배경이 칠해지며, 블록 요소이므로 요소의 전체 너비와 높이를 덮습니다.
   3. 그런 다음 .bottom의 녹색 배경이 그려지지만 음수 여백으로 인해 .box의 텍스트 콘텐츠와 배경 사이에서 미끄러집니다.
   4. 두 요소의 텍스트 콘텐츠는 다음과 같습니다. 마지막으로 칠합니다.

   결론

   관찰된 동작은 미리 정의된 CSS 페인팅 순서의 결과입니다. 이 순서는 겹치는 요소의 배경 이미지나 색상보다 텍스트 콘텐츠 렌더링을 우선시합니다.