因为position: absolute元素彻底脱离文档流，父容器计算高度时完全“看不见”它；即使子元素内容再高，父容器高度仍塌陷为0，背景色缩成一条线，边框不包裹内容。
absolute 元素为什么撑不开父容器高度
因为 position: absolute 让元素彻底脱离文档流，父容器在计算自身高度时直接“看不见”它。哪怕子元素内容再高、图片再大，只要它是 absolute，父容器就无法感知其尺寸——结果就是高度塌陷为 0，背景色缩成一条线，边框不包裹内容。
常见错误写法：.parent { position: relative; } + .child { position: absolute; top: 0; width: 100%; height: auto; }。加 position: relative 只是提供定位参考，并不能让父容器“重新接纳”子元素的高度。
- 不要用
min-height或height: 100%硬撑——父容器本身没高度，百分比值无效 - 如果需要父容器自适应包裹内容（比如 banner 区域含背景图+标题），就把真正决定高度的内容保留在文档流中，仅把装饰性元素（如角标、图标）设为 absolute
- 必须动态响应高度？只能靠 JS 监听内容变化后手动设置
min-height，这不是 CSS 能解决的问题
缩放时 absolute 元素“飞走”的真实原因
浏览器缩放改变的是渲染比例，但 top: 24px、right: 180px 这类像素值本身不会变。父容器按比例缩放了，子元素却还钉死在原坐标上，视觉偏移就不可避免。
最容易暴露问题的场景：顶部导航栏右上角按钮组、轮播图控制点、悬浮 tooltip——尤其当它们同时满足“position: absolute + 像素偏移 + 父容器未设响应式宽高”时，错位会非常显著。
立即学习“前端免费学习笔记（深入）”；
- 快速验证：在 Chrome DevTools 中执行
document.querySelectorAll('[style*="absolute"]').forEach(el => el.style.position = "static")，看布局是否立刻“归位” - 临时改用
right: 0; margin-right: 1.5rem比直接写right: 24px更安全（前提是父容器box-sizing: border-box） - 用
vw替代px要小心：小屏下right: 5vw可能溢出，得配@media (max-width: 768px) { right: 0; }
z-index 层叠失控不是数值不够大，而是上下文缺失
z-index 不是全局排序器，它只在同一个层叠上下文中生效。一个常见误区是给弹窗设 z-index: 9999，结果仍被导航栏遮住——大概率是导航栏父容器创建了独立层叠上下文（比如设了 position: relative 且 z-index: 100），而弹窗在另一个上下文里，两者根本不在一个“楼层”比高低。
- 检查父容器是否漏了
position: relative（或其它非 static 值）：没有它，子元素的z-index就是摆设 - 多个 absolute 元素同级时，DOM 顺序决定默认层级；一旦某个祖先创建了层叠上下文，所有后代都只能在这个“小房间”里排座次
- 避免无意义堆高数值，优先理清层叠结构，必要时用
isolation: isolate主动隔离上下文
真正难修复的不是单个 absolute，而是嵌套 absolute 结构
当 position: absolute 的父容器自己也是 absolute，再套一层 absolute 子元素，缩放、响应式、高度计算全都会崩。这种结构天然拒绝弹性，任何媒体查询微调都是补丁式维护，越改越脆。
重构成本虽高，但 Flex/Grid 几乎是唯一可靠解法：它们基于内容驱动布局，自动处理对齐、换行、空间分配，不需要你算 top 和 left。
- 居中需求别硬凑
top: 50%; left: 50%; transform: translate(-50%, -50%)，改用display: flex; align-items: center; justify-content: center - 侧边栏+主内容布局，用
display: grid; grid-template-columns: 250px 1fr，比一堆 relative + absolute + z-index 清晰得多 - 图标按钮固定在右上角？
position: sticky; top: 1rem; right: 1rem比fixed更可控，也比absolute更易响应父容器变化
