绝对定位元素不参与父容器高度计算，因其脱离文档流，父容器在尺寸计算中直接忽略它；这是css规范行为，非bug。应通过flex/grid对齐或js动态计算等方案应对布局需求。

绝对定位元素本来就不会撑开父容器——这是 CSS 规范行为，不是 bug，也不需要“修复”。真正要解决的，是误以为它该撑开、或因布局错位导致父容器意外变形的问题。

为什么absolute子元素不参与父容器高度计算

position: absolute 元素被浏览器从文档流中完全移除，父容器在计算 height、min-height 或 flex/grid 主轴尺寸时，直接忽略它。即使它视觉上盖在父容器里，对父容器来说它“不存在”。

• 这不是 flex 容器特有现象，block、grid、table 容器全一样
• 父容器设了 position: relative 只是提供定位参考系，不改变“不参与尺寸计算”这一事实
• 常见误判：看到父容器变高了，其实是其他流内元素（比如空 <div>、文本、padding）撑的，不是 <code>absolute 子元素

  父容器被“撑开”的真实原因和应对

  所谓“撑开”，往往来自三类干扰：

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • overflow: auto/scroll 的父容器设置了 height，但内部 absolute 元素触发了滚动条出现 → 实际是滚动条宽度/高度挤占空间，不是元素撑高
  • 父容器本身是 display: flex 或 grid，且所有子元素都用了 absolute → 父容器变成“无流内子项”，退化为 0 高度容器（此时看起来像“塌陷”，实则是没内容可撑）
  • 开发者手动加了 padding-bottom 或伪元素占位，又没同步更新 → 占位尺寸与 absolute 元素实际位置错配，造成留白或重叠

  应对方式不是让 absolute 参与计算，而是厘清谁该负责高度：如果视觉上必须撑高，就换用 display: flex + align-items 或 grid + place-items；如果只是覆盖层（如下拉、tooltip），就接受它不撑高，并确保父容器有明确高度来源（比如 min-height 或流内其他元素）。

  想让它“看起来撑开”？别碰absolute，改用这些方案

  强行让 absolute 影响高度只能靠 JS（如读取 getBoundingClientRect() 后设 height），但不可靠、难维护、响应式失效。更稳的替代路径：

  • 右上角图标 → 父容器 display: flex; justify-content: flex-end; align-items: flex-start;，子元素保持 static
  • 居中遮罩 → 父容器 display: grid; place-items: center;，子元素不加 position
  • 下拉列表需突破父级裁剪 → 把 .dropdown 移出原父容器 DOM（用 React Portal / document.body append），而非硬调高度

  关键点在于：CSS 层叠（z-index）和尺寸计算（height）是两套独立机制。试图用一个属性同时解决定位、层叠、尺寸，注定要踩坑。先决定它是不是“应该属于父容器的内容流”，再选技术路径——这点比任何 hack 都重要。