定位元素脱离文档流导致父容器高度塌陷是正常行为；可通过占位元素、min-height、transform偏移、BFC配合内边距或改用Grid/Flex布局来解决。
定位元素（position: absolute 或 position: fixed）默认脱离文档流，因此不会影响父容器的高度计算——这是正常行为，不是 bug。要让父容器“感知”到定位子元素并撑开高度，需主动干预布局逻辑。
用相对定位 + 占位元素模拟高度
如果绝对定位的内容在视觉上应属于父容器的“自然延伸”，可在父容器内保留一个与定位内容尺寸一致的空元素（如 <div class="placeholder"></div>），并用 JS 动态设置其 height（或通过 CSS 变量 + calc 配合）。更轻量的做法是：给父容器设置 min-height，预估或通过 JS 测量定位内容高度后赋值。
改用 transform 模拟定位，不脱离文档流
若只是需要偏移效果（比如右上角徽标、悬浮按钮），优先考虑 transform: translate(x, y) 配合 position: relative。这样元素仍在文档流中，父容器能正常计算高度。例如：
.badge { position: relative; top: -8px; right: -8px; transform: translate(8px, -8px); }
立即学习“前端免费学习笔记（深入）”；
父容器启用 BFC 并配合 padding/height 处理
对父容器设置 overflow: hidden、display: flow-root 等触发 BFC 的属性本身不能解决高度塌陷，但可配合以下方式：
- 明确设置父容器 padding-bottom，预留定位内容所需空间
- 用伪元素 ::after 清除浮动+占位（适用于部分老方案）
- 若定位内容位置固定（如底部工具栏），直接设父容器 padding-bottom: 60px
必要时放弃绝对定位，改用 Grid/Flex 布局
现代布局中，很多“绝对定位”的需求其实可用 display: grid 或 flex 更优雅实现。例如右上角图标，可用 justify-content: space-between + align-items: flex-start；全屏覆盖层可用 grid-area 或 place-items: center。这些方式天然参与高度计算，无需额外 hack。
