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

절대 위치 하위 항목을 사용한 상위 Div 확장

CSS로 작업할 때 데스크톱과 모바일 모두에서 요소를 다른 요소 앞에 배치해야 하는 경우가 있습니다. 장치. 그러나 절대 위치 지정은 흐름에서 요소를 제거하여 다른 요소에서 해당 요소를 무시하게 만듭니다.

이 시나리오에서는 다음 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가 해당 높이를 무시하기 때문에 이 구성이 실패합니다. overflow:hidden을 설정하거나 상위 항목에 대해clearfix를 사용하려는 시도는 효과가 없습니다.

근본적인 문제는 상위 컨테이너의 높이 계산에서 절대 위치 지정 요소가 고려되지 않는다는 것입니다. 따라서 절대 위치에 있는 하위 항목을 기준으로 상위 항목의 키를 결정하는 것은 불가능합니다.

이 문제를 해결하려면 두 가지 옵션을 사용할 수 있습니다.

• 고정 높이 사용 : child1과 child2 모두에 고정 높이를 할당하여 상위 div의 높이가 수용하기에 충분한지 확인합니다. 둘 다.
• JavaScript 포함: JavaScript를 사용하여 두 div의 위치를 ​​동적으로 변경하여 원하는 시각적 순서를 유지하고 그에 따라 상위 div의 높이가 조정되도록 합니다.

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