绝对定位的 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中文网其他相关文章！