절대 위치 Div가 상위 컨테이너의 높이에 어떤 영향을 줍니까?

절대 위치 Div가 상위 높이에 미치는 영향

CSS로 작업할 때 요소의 위치가 주변 요소에 어떤 영향을 미치는지 고려하는 것이 중요합니다. 일반적인 과제 중 하나는 절대 위치에 있는 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 앞에 배치합니다. 그러나 child2에는 동적 높이가 있으므로 상위 div에 대해 고정 높이를 설정하는 것은 옵션이 아닙니다.

안타깝게도 절대 위치에 있는 요소는 흐름에서 제거되므로 상위 div 내의 다른 요소에서는 무시됩니다. 컨테이너. 상위 div에 Overflow:hidden을 설정하거나 Clearfix를 사용해도 도움이 되지 않습니다.

해결책

문제 설명에서 알 수 있듯이 해결책은 다음을 절대적으로 이해하는 데 있습니다. 위치가 지정된 요소는 흐름에서 제거됩니다. 따라서 절대 위치에 있는 요소를 기반으로 상위 요소의 높이를 설정하는 것은 불가능합니다.

고려할 옵션:

• 고정 높이: 적절한 높이를 보장하기 위해 두 하위 요소 모두에 고정 높이를 할당합니다. 레이아웃.
• JavaScript: JavaScript를 사용하여 child2의 높이에 따라 div의 위치를 ​​동적으로 조정합니다.
• CSS flexbox 또는 그리드 레이아웃: 최신 CSS 기술을 사용하면 절대값을 사용하지 않고도 상위 컨테이너 내에서 HTML 요소의 시각적 순서를 바꿀 수 있습니다. 포지셔닝.

위 내용은 절대 위치 Div가 상위 컨테이너의 높이에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!