绝对定位子元素不占位，完全脱离文档流，父容器计算尺寸时无视其存在；需为父元素设置position: relative等非static定位才能建立定位上下文，否则偏移参考祖先或body。
子元素 position: absolute 确实不占位
绝对定位的子元素会完全脱离文档流，父容器在计算高度、宽度和布局时直接“看不见”它。哪怕它有实际尺寸、内容或设置了 top/left，也不会影响父元素的盒模型表现（比如 height: auto 的父元素会塌陷）。
常见错误现象：
— 父 div 高度为 0，背景色/边框不可见
— 后续兄弟元素紧贴父元素顶部，像它不存在一样
— 使用 margin 或 padding 试图“推开”绝对定位子元素，毫无效果
- 触发条件：子元素声明了
position: absolute（且父元素有非static定位，否则会逐层向上找最近的定位祖先） - 关键判断依据：它是否参与父容器的
content-box尺寸计算 — 不参与，就是不占位 - 注意：
z-index和渲染层级无关占位逻辑，只管叠放顺序
父容器必须有定位上下文，否则绝对定位可能“飞走”
position: absolute 的偏移参考对象是“最近的已定位祖先元素”（即 position 值为 relative、absolute、fixed 或 sticky）。如果父元素仍是 position: static（默认值），浏览器会继续往上找 — 最终可能相对于 body 或初始包含块定位，导致位置失控。
- 正确做法：给父容器显式设置
position: relative（最常用，不影响布局） - 不要只写
top: 20px就以为能“相对父元素下移”，没定位上下文就无效 - 兼容性提示：IE7+ 支持该规则，无需 hack；但老版本 Safari 对
transform+absolute组合有边界计算偏差
想让父容器“感知”绝对定位子元素？得手动干预
CSS 本身没有自动拉伸父容器以包裹绝对定位子元素的机制。所谓“撑开”，只能靠其他手段模拟：
立即学习“前端免费学习笔记（深入）”；
- 用伪元素占位：
::after设置相同尺寸 +visibility: hidden，再配合position: relative拉高父容器 - 复制一份透明/不可见的静态副本（
opacity: 0+pointer-events: none），保留文档流占位 - JavaScript 动态读取子元素
getBoundingClientRect()，再设置父元素min-height - 更现代的替代思路：改用
position: sticky或 Flex/Grid 布局实现类似视觉效果，避免脱离流带来的副作用
性能提醒：JS 方案在频繁重排场景（如滚动中）易卡顿；伪元素方案需维护两套样式，容易不同步。
绝对定位元素仍受父容器 overflow 和 clip-path 约束
虽然不占位，但它仍在父容器的“包含块”内（前提是父有定位上下文）。这意味着：
- 父元素设了
overflow: hidden，超出部分会被裁剪 — 即使子元素是absolute -
transform（如scale、rotate）作用于父容器时，绝对定位子元素会跟随变换，但偏移基准点仍是原定位上下文 -
will-change: transform对绝对定位子元素单独启用，可提升动画性能，但不会改变其脱离流的本质
最容易被忽略的一点：当父容器同时存在 transform 和 position: relative 时，某些旧版 Chrome 会错误地将变换后的区域当作新的包含块，导致 top/left 计算偏移 — 测试时务必在目标环境验证。
