如何正確設定具有絕對定位子級的父級容器的高度？

絕對位置和父容器高度

使用絕對定位的元素時，要確定其父容器的高度變得很困難。當子元素絕對或相對定位在父容器內時，並且您希望為父元素設定合適的高度以確保其子元素保持在其邊界內時，就會出現此問題。

要解決此問題，至關重要認識到絕對定位的元素已從文件流中刪除，使它們無法影響其父容器的尺寸。如果需要為子元素設定“position:absolute”，請考慮在子元素渲染後使用 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中文網其他相關文章！