如何為絕對定位的子容器設定父容器的高度？

父級高度和絕對定位

當我們使用容器及其絕對定位或相對定位的子級時，我們可能會遇到挑戰，在確定容器的高度的同時確保容器的高度孩子們仍留在其中。

問題

考慮以下HTML 和CSS代碼：

<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;
}

目標是確保「bar」文字出現在四個方塊之間，而不是它們後面。但是，由於正方形的絕對定位，容器的高度無法根據其子級的尺寸來設定。

解決方案

2022 更新：

現代 CSS 佈局技術（例如 Flex 或 Grid）提供了更優雅的解決方案。建議探索這些選項以獲得更好的支援和靈活性。

原始答案：

使用純CSS，不可能在保持絕對高度的同時設定父級的高度為其子級定位。

替代方案方法：

• JavaScript：渲染後計算絕對定位子級的高度，並用它來設定父級的高度。
• 浮動和邊距： 使用浮動和邊距定位子項，同時將它們保留在文件流中。在父級上利用溢出：隱藏（或clearfix技術），根據子級的尺寸擴展其高度。

以上是如何為絕對定位的子容器設定父容器的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！