절대 위치에 있는 하위 항목이 있는 상위 컨테이너의 높이를 올바르게 설정하려면 어떻게 해야 합니까?

절대 위치 및 상위 높이

절대 위치 요소로 작업할 때 상위 컨테이너의 높이를 결정하는 것이 어려워집니다. 이 문제는 하위 요소가 상위 컨테이너 내에서 절대적으로 또는 상대적으로 위치할 때 발생하며 하위 요소가 해당 경계 내에 유지되도록 상위 요소에 적절한 높이를 설정하려는 경우에 발생합니다.

이 문제를 해결하려면 다음이 필수적입니다. 절대 위치에 있는 요소가 문서 흐름에서 제거되어 해당 요소가 상위 컨테이너의 크기에 영향을 미칠 수 없도록 렌더링한다는 것을 인식합니다. 하위 요소에 대해 "위치: 절대" 설정이 요구사항인 경우 하위 요소가 렌더링된 후 JavaScript를 사용하여 상위 컨테이너의 높이를 동적으로 조정하는 것이 좋습니다. 여기에는 JavaScript를 사용하여 절대 위치에 있는 하위 요소의 높이를 계산한 다음 해당 값을 상위 컨테이너의 높이에 적용하는 작업이 포함됩니다.

그러나 float 속성과 여백을 활용하여 절대 위치 지정을 모방하는 더 간단한 솔루션이 있습니다. 문서 흐름 내에서 하위 요소를 유지합니다. 하위 요소(예: float: left)에 대해 부동 값을 설정하고 여백을 통합하면 원하는 위치를 지정할 수 있습니다. 또한 상위 컨테이너에overflow:hidden을 설정하거나 다른 Clearfix 기술을 구현하면 높이가 하위 요소의 크기와 일치하도록 강제로 확장됩니다.

다음은 CSS를 사용하여 이 위치를 지정하는 방법에 대한 예입니다.

article {
  position: relative;
  overflow: hidden;
}

.one {
  position: relative;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}

.two {
  position: relative;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

이러한 기술을 적용하면 하위 요소의 위치를 ​​효과적으로 제어하고 상위 컨테이너의 적절한 높이를 유지할 수 있습니다.

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