如何让家长区扩大以适应绝对定位的孩子？

具有绝对定位子元素的父级 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中文网其他相关文章！