如何讓家長區擴大以適應絕對定位的孩子？

具有絕對定位子元素的父級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中文網其他相關文章！