절대 위치 지정을 사용할 때 그라데이션 배경이 사라지는 이유는 무엇입니까?

절대 위치 지정으로 그라데이션이 사라지는 방법: A 해상도

이 기술 탐구에서는 선형 그라데이션 배경이 사라지는 이유를 이해하려고 합니다. 요소는 절대 위치에 있습니다. 목표는 화면 해상도에 관계없이 뷰포트 중앙에 유지되는 중앙 헤더를 만드는 것입니다.

제공된 코드 조각에 문제가 있습니다. 헤더에 절대 위치가 지정되면 그라데이션 배경이 사라집니다. 이는 문서의 일반적인 흐름에서 요소가 제거되고 배경이 남겨지기 때문입니다.

이 문제를 해결하려면 본문 요소에 높이를 추가해야 합니다. 이렇게 하면 배경이 제대로 렌더링되어 머리글이 절대 위치에 있는 경우에도 배경이 표시됩니다. 수정된 CSS 코드는 다음과 같습니다.

<code class="CSS">body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
  min-height: 100vh;
}</code>

min-height: 100vh를 추가하여 본문 높이가 뷰포트 높이와 동일하도록 보장합니다. 이렇게 하면 헤더 크기에 관계없이 그라데이션 배경이 전체 뷰포트를 덮게 됩니다.

이 수정을 통해 헤더는 이제 화면 해상도가 달라도 뷰포트에서 수직 및 수평 중앙에 위치하게 됩니다. 배경 그라데이션도 표시되며 전체 뷰포트에 걸쳐 표시됩니다.

위 내용은 절대 위치 지정을 사용할 때 그라데이션 배경이 사라지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!