절대 위치에 있는 하위 항목에 맞게 상위 사업부를 확장하려면 어떻게 해야 합니까?

절대 위치에 있는 하위 Div를 기준으로 상위 Div 높이 크기 조정

웹 디자인에서는 상위 컨테이너 내의 요소를 배치해야 하는 경우가 많습니다. 비선형 패션. 이는 일반 문서 흐름에서 요소를 제거하는 절대 위치 지정을 사용하여 달성할 수 있습니다. 그러나 절대 위치에 있는 하위 항목을 수용하기 위해 상위 div의 높이를 확장하려고 하면 일반적인 문제가 발생합니다.

문제

다음 HTML 및 CSS를 고려하세요.

<div>

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

이 시나리오에서 child2는 동적 높이를 가지며 child1 아래에 표시되어야 합니다. 그러나 상위 div인 #parent는 child2의 높이를 포함하도록 확장되지 않습니다.

해결 방법

절대 위치 요소가 제거되기 때문에 문제가 발생합니다. 흐름. 결과적으로 다른 요소에서 무시되어 상위 div가 높이 계산 시 child2를 고려하지 않게 됩니다.

대안

이 문제를 해결하기 위한 두 가지 주요 옵션이 있습니다. :

• 수동 크기 조정: 비 CSS 사용 JavaScript와 같은 접근 방식을 사용하여 div의 위치를 ​​변경하고 상위 항목의 높이를 동적으로 조정합니다.
• CSS 레이아웃: CSS Flexbox 또는 그리드 레이아웃을 사용하여 요소의 시각적 순서를 반대로 바꿉니다. 이를 통해 요소 흐름을 유지하면서 유연한 위치 지정이 가능합니다.

위 내용은 절대 위치에 있는 하위 항목에 맞게 상위 사업부를 확장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!