絕對定位的 div 如何影響其父容器的高度？

絕對定位 Div 對父級高度的影響

使用 CSS 時，考慮元素的定位如何影響其周圍元素至關重要。一個常見的挑戰是確保絕對定位的 div 不會忽略其父容器中的其他元素。

考慮以下 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 設定固定高度。

不幸的是，由於絕對定位的元素已從流中刪除，因此它們會被父級中的其他元素忽略容器。在父div上設定overflow:hidden或使用Clearfix不會有幫助。

解決方案

正如問題陳述中所認識到的，解決方案在於絕對理解定位的元素被從流中取出。因此，不可能根據絕對定位元素來設定父級的高度。

要考慮的選項：

• 固定高度： 為兩個子元素分配固定高度以確保正確佈局。
• JavaScript： 涉及 JavaScript 根據 child2 的高度動態調整 div 的位置。
• CSS Flexbox 或網格佈局： 這些較新的 CSS 技術可讓您在不使用絕對定位的情況下反轉父容器中 HTML 元素的視覺順序。

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