HTML父元素高度为0 如何让父元素自适应绝对定位子元素高度

给子元素设置position: absolute后，元素会完全脱离常规文档流，父元素计算自身高度时不会纳入脱离流的子元素尺寸，你当前代码里.parent内部没有处于常规流的子元素，自然高度为0，后续的段落元素就会被堆叠的绝对定位子元素遮挡。

方案1：固定尺寸场景直接给父元素设值 #

如果所有堆叠子元素的尺寸是固定的，直接给父元素设置和子元素匹配的宽高即可，实现成本最低：

.parent {
    position: relative;
    /* 按你的子元素实际尺寸设置即可 */
    width: 300px;
    height: 200px;
}
.child {
    position: absolute;
    /* 用inset:0让所有子元素铺满父容器实现堆叠，替代top/left等四个方向的属性 */
    inset: 0;
}

方案2：动态尺寸场景用CSS Grid实现堆叠 #

如果子元素内容不固定、尺寸随内容动态变化，不要用绝对定位做堆叠，改用CSS Grid实现，父元素会自动按最高子元素的高度适配，不会出现高度塌陷：

.parent {
    display: grid;
}
.child {
    /* 所有子元素锚定到同一个网格区域，天然实现层叠效果 */
    grid-area: 1/1/-1/-1;
    /* 按需设置z-index调整子元素的堆叠顺序即可 */
}

这个方案不需要写JS动态计算高度，所有子元素都处于正常文档流中，父元素计算高度时会自动取所有子元素的最大高度，适配动态内容场景非常方便。

如果需要兼容不支持CSS Grid的老旧浏览器，可以在父元素内部放一个不设置绝对定位的占位元素，把它的尺寸设为堆叠元素的最大尺寸用来撑开父容器，其余需要堆叠的元素保留绝对定位即可。

内容的提问来源于stack exchange，提问作者Max