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

겹치는 요소의 배경으로 콘텐츠가 가려지지 않습니다

이러한 불일치는 CSS 구성 요소의 고유한 렌더링 순서로 인해 발생합니다. HTML 요소는 다음 순서로 렌더링됩니다.

1. 상위 요소의 배경 및 테두리
2. 하위 요소의 배경 및 테두리
3. 하위 요소의 콘텐츠

제공된 예에서 두 번째 div에는 음수 margin-top이 적용되어 첫 번째 div와 겹칩니다. div. 그러나 위에서 언급한 렌더링 순서로 인해 두 번째 div의 배경은 첫 번째 div의 콘텐츠 아래에 그려집니다.

명확히 말하자면 중첩 순서와 개별 요소 레이아웃이 시각적 출력에 영향을 미칩니다. 텍스트의 중요성으로 인해 콘텐츠가 배경 위에 배치됩니다. 이 우선순위 순서는 보다 복잡한 시나리오에서 관찰할 수 있습니다.

body {
  background: pink;
}

div {
  background: red;
  border: 3px solid brown;
  margin-bottom: -20px;
}

이 예제의 렌더링 순서는 다음과 같습니다.

1. 의 배경
2. 첫번째
   의 배경과 테두리
3. 첫번째 내용
4. 두 번째
   의 배경 및 테두리
5. 두 번째

   의 내용 요소를 사용하면 이 동작을 수정할 수 있습니다. 이 작업은 새로운 스태킹 컨텍스트를 생성하여 z-index를 사용하여 요소의 배치를 제어할 수 있게 해줍니다. 이 메커니즘을 사용하면 HTML 구조에 관계없이 원하는 순서로 요소를 시각적으로 배치할 수 있습니다.

   이 현상은 특별히 직관적이지 않다는 점에 유의하는 것이 중요합니다. 그러나 CSS 렌더링 순서를 이해하면 이러한 시각적 효과를 예측하고 제어할 수 있습니다.