父容器高度塌陷是因为position: absolute子元素脱离文档流，父容器计算高度时忽略它；解决方法包括设height/min-height、padding-bottom占位、普通流占位元素，或改用flex/grid布局。
父容器默认“看不见” position: absolute 子元素，所以它不会自动撑高——这不是 bug，是 CSS 渲染规则决定的。想让它包含住，得主动干预。
为什么父容器高度塌陷？
因为 position: absolute 元素完全脱离文档流，父容器计算高度时直接忽略它。即使子元素视觉上在父内，父的 offsetHeight 或背景色/边框也只包住其他普通流内容。
- 常见表现：父容器背景只显示一小块，右上角 badge 悬在空白处
- 父元素加了
position: relative不会导致塌陷，但加了之后再放absolute子项，塌陷就暴露出来了 - 别查父元素有没有写
position: relative——那只是解决定位参考问题，和撑高无关
手动撑开父容器的三种实操方式
没有银弹，选哪种取决于你对尺寸确定性的要求：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
显式设
height或min-height：适合固定高场景（比如 badge 总是 24px 高），min-height更安全，留出内容增长余地 -
用
padding-bottom占位：如果absolute子元素高度已知且稳定（如 32px），给父加padding-bottom: 32px，简单直接 -
留一个普通流占位元素：在父里塞一个空
<div></div>并设height: 32px，不破坏语义，但 HTML 多了一行
更现代的替代思路：别用 absolute + relative 组合
当目标只是“右上角 badge”“底部悬浮按钮”“居中弹窗”，display: grid 或 display: flex 往往更干净：
-
.parent { display: grid; place-items: end end; }→ 子元素自动贴右下角，且参与父高度计算 -
.parent { display: flex; justify-content: flex-end; align-items: flex-end; }→ 同样生效，兼容性略好于place-items - 这些方案天然规避塌陷问题，也不用担心
padding影响偏移起点
容易被忽略的关键细节
top/left 的起始点是父元素的 padding box 边缘，不是 border 外侧，也不是内容区顶部。如果父有 padding: 12px，top: 0; left: 0 的子元素会离 border 内侧空出 12px——这点在需要像素级对齐时特别容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
