父容器高度塌陷是因绝对定位子元素脱离文档流所致。解决方案包括：手动计算子元素最大占位高度并设置父容器高度；用伪元素或空子元素撑开；或改用flex/grid布局+局部absolute覆盖。
父容器高度塌陷：绝对定位子元素不参与文档流
父级设了 position: relative，但所有子元素都用了 position: absolute，结果父容器高度变成 0——这不是 bug，是 CSS 规范行为。绝对定位元素完全脱离文档流，父容器计算高度时直接“看不见”它们。
常见错误现象：height: auto 的父容器在 DevTools 里显示 0px，背景色/边框不展开，下方兄弟元素往上贴；用 getBoundingClientRect() 或 offsetHeight 读到的也是 0。
- 别指望靠
min-height硬撑——它只解决“最小”问题，不反映真实内容尺寸 - 别给父容器加
height: 100%——这依赖父级有明确高度，容易引发连锁失效 - 如果子元素位置由 JS 动态计算，记得高度也要同步更新，不能只改
top/left
手动计算并设置父容器高度（最可控）
当子元素位置和尺寸确定、或可通过 JS 获取时，这是最直接的办法。关键不是“让父容器自适应”，而是“告诉父容器它该有多高”。
使用场景：轮播图容器、弹窗布局、图表标注层、游戏 UI 层等子元素位置强控制、数量固定的场合。
- 遍历所有绝对定位子元素，收集
offsetTop + offsetHeight最大值 - 考虑
bottom定位的元素：需用offsetTop和offsetHeight反推实际占位 - 记得加上
padding和border（用getComputedStyle读） - 响应式下需监听
resize并重算，但避免高频触发，可用throttle
示例逻辑：
const children = Array.from(parent.querySelectorAll('[style*="absolute"]'));
const maxHeight = Math.max(...children.map(el => el.offsetTop + el.offsetHeight));
parent.style.height = `${maxHeight}px`;
用伪元素或空子元素撑开（适合静态或简单动态）
不依赖 JS，用 CSS 自己“骗”出高度。本质是往父容器里塞一个参与文档流的元素，让它根据绝对定位子元素的位置“感知”到底部在哪。
性能影响小，兼容性好（IE8+），但灵活性低：无法响应子元素尺寸变化，也不适合 bottom 或 transform 偏移的复杂定位。
- 在父容器末尾加一个空
<div class="spacer"></div>，设position: static，再用 JS 把它的margin-top设为最深子元素的top + height - 或用伪元素：
::after { content: ""; display: block; height: 0; margin-top: 200px; }，但这个值得手写或 JS 注入 - 注意：若父容器有
overflow: hidden，撑开的空白可能被裁掉，要检查
换布局方式：什么时候该放弃 absolute？
如果发现你总在补高度、算偏移、修塌陷，大概率是选错了定位策略。absolute 不是万能胶，它适合“覆盖层”“悬浮按钮”“精确像素对齐”，不适合主内容流。
替代方案优先级：
- 主结构用
flex或grid，需要覆盖的局部用absolute—— 这样父容器自然有高度 - 用
transform: translate()替代top/left移动，它不脱离文档流，不影响父容器高度（但要注意z-index层叠上下文） - 某些动画场景可用
position: fixed配合 JS 控制，但会脱离视口滚动流，慎用
容易被忽略的一点：absolute 子元素若设置了 inset（如 inset: 0），它会拉伸填满父容器，此时父容器高度反而由其自身尺寸决定——但前提是父容器本身得有宽高来源，否则又回到原点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
