절대 위치에 있는 하위 항목이 있는 상위 컨테이너의 높이를 어떻게 설정할 수 있습니까?

상위 높이 및 절대 위치 지정

컨테이너와 절대 위치 또는 상대적 위치에 있는 하위 항목으로 작업할 때 컨테이너 높이를 결정하는 동시에 컨테이너 높이를 결정하는 데 어려움을 겪을 수 있습니다. 아이들은 그 안에 남아 있습니다.

문제

다음 HTML 및 CSS를 고려하십시오. code:

<section></section>

article {
  position: relative;
}

.one {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}

.two {
  position: absolute;
  top: 10px;
  right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

목표는 "막대" 텍스트가 네 개의 사각형 뒤가 아닌 네 개의 사각형 사이에 나타나도록 하는 것입니다. 그러나 사각형의 절대적인 위치로 인해 컨테이너의 높이는 하위 항목의 크기에 따라 설정할 수 없습니다.

솔루션

2022 업데이트:

Flex 또는 Grid와 같은 최신 CSS 레이아웃 기술은 더욱 우아한 솔루션을 제공합니다. 더 나은 지원과 유연성을 위해 이러한 옵션을 탐색하는 것이 좋습니다.

원래 답변:

순수한 CSS를 사용하면 절대값을 유지하면서 부모의 높이를 설정할 수 없습니다. 아이들을 위한 포지셔닝.

대안 접근법:

• JavaScript: 렌더링 후 절대 위치에 있는 자식의 높이를 계산하고 이를 사용하여 부모의 높이를 설정합니다.
• 부동 및 여백: 문서 흐름을 유지하면서 부동 및 여백을 사용하여 어린이의 위치를 ​​지정합니다. 오버플로를 활용합니다: 부모의 숨겨진(또는 클리어픽스 기술)을 사용하여 자식의 크기에 따라 높이를 확장합니다.

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