절대 위치에 있는 하위 항목을 캡슐화하기 위해 컨테이너 높이를 어떻게 설정합니까?

절대적으로 위치된 하위 항목이 있는 컨테이너 높이

이 상황에서 컨테이너에는 절대적/상대적으로 위치된 하위 항목만 있으므로 유지할 컨테이너의 높이를 결정합니다. 포함된 하위 요소는 어려울 수 있습니다.

CSS에서 절대 위치에 있는 요소는 일반 문서 흐름에서 제외됩니다. 결과적으로 해당 크기는 상위 크기에 영향을 주지 않습니다.

JavaScript를 사용하여 가능한 솔루션:

절대 위치 지정을 유지하는 것이 필수적인 경우 JavaScript를 사용하여 다음을 수행할 수 있습니다. 원하는 효과. 특히, 렌더링된 후 절대 위치에 있는 하위 항목의 높이를 검색하고 해당 값을 사용하여 상위 항목의 높이를 조정하는 스크립트를 작성할 수 있습니다.

Float 및 Overflow를 사용한 대체 솔루션:

대체 접근 방식은 문서 흐름 내에서 하위 요소를 유지하면서 절대 위치를 모방하기 위해 float: left/float:right 및 여백을 활용하는 것입니다. 하위 항목의 키를 수용하려면 상위 컨테이너에overflow:hidden을 적용하거나 다른 Clearfix 기술을 사용할 수 있습니다.

위 내용은 절대 위치에 있는 하위 항목을 캡슐화하기 위해 컨테이너 높이를 어떻게 설정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!