绝对定位元素常导致父元素高度塌陷，因其脱离文档流使父元素无法感知其尺寸，仅依赖其他非定位子元素计算高度，故父容器可能退化为0。
绝对定位元素为什么常导致父元素高度塌陷
因为 position: absolute 会让元素完全脱离文档流，父元素在计算高度时会“看不见”它——就像它不存在一样。此时父元素高度只由其他未脱离流的子元素决定。
常见现象：父容器设置了 border 或 background-color，但实际渲染出来是“一条线”或完全不可见，就是因为内部只有绝对定位子元素。
- 绝对定位元素不再参与父元素的
height、min-height计算 - 父元素若无其他内容（如文本、块级非定位子元素），其高度会退化为
0 - 即使给绝对定位子元素设了
top/bottom，也不改变父元素布局盒尺寸
relative 和 fixed 定位对父元素高度的影响差异
position: relative 不脱离文档流，所以不影响父元素高度计算；而 position: fixed 脱离文档流且相对于视口定位，同样会导致父元素“忽略”该元素。
注意：fixed 元素的父容器甚至不一定是其 DOM 父级——它的包含块是视口，因此和父元素高度更无关系。
立即学习“前端免费学习笔记（深入）”；
-
relative：保留原始占位空间，父元素高度照常累加 -
fixed：脱离文档流 + 包含块为视口，父元素高度不受影响（也不会被撑开） -
sticky行为介于两者之间：未触发时表现如relative，触发后表现如fixed，但始终不撑高父容器
如何让父元素“感知”绝对定位子元素的高度
没有直接 CSS 方式让父元素自动包含绝对定位子元素的高度，必须用间接手段补足布局需求。
核心思路是：用一个不脱离流的占位元素“模拟”绝对定位元素所需的空间，或改用不影响文档流但能撑高的替代方案。
- 手动添加一个空的
<div>并设置padding-bottom或margin-bottom模拟高度 - 用
position: relative+transform替代absolute（需配合top/left和transform微调，保持占位） - 改用 Flex/Grid 布局控制位置，子项默认不脱离流，高度自然参与计算
- JavaScript 动态读取绝对定位元素的
getBoundingClientRect()，再设置父元素min-height（仅限无法纯 CSS 解决的复杂场景）
实际调试中怎么快速判断是否是定位导致的高度问题
打开浏览器开发者工具，选中父元素，在 Styles 面板检查 computed height 是否为 0 或远小于预期；再逐个禁用子元素的 position 声明，观察父元素高度是否恢复。
关键线索：
- 父元素
display是block但 computed height =0px - 子元素样式中存在
position: absolute或position: fixed - 父元素无边框/背景时“消失”，加上
outline: 1px solid red后发现 outline 也缩成一条线
.parent {
border: 1px solid #ccc;
/* 加上这行就能立刻看到真实边界 */
outline: 1px dashed blue;
}脱离文档流不是 bug，是设计特性；但误用它来“隐藏又占位”就会出问题。真正要注意的是：只要用了 absolute 或 fixed，就要主动承担起高度管理的责任——CSS 不会替你猜。
