绝对定位元素的 left 百分比按最近非 static 祖先的包含块宽度计算；若无则 fallback 到视口；包含块宽度为 0 时结果为 0px；top/bottom/margin 均以宽度为基准，非高度。
绝对定位元素的 left 百分比到底按谁算？
它不按父元素的 width 算，而是按“最近一个 position 不为 static 的祖先元素”的包含块宽度算。这个祖先可能是 relative、absolute、fixed 或 sticky 定位的任意一层——哪怕隔了三层 DOM，只要中间两层没设 position，就直接跳过去。
常见错误现象：
-
left: 50%元素飞到视口左侧，不是父容器中间 → 父元素漏了position: relative - 加了
transform: rotate(0.1deg)后left: 0不再贴左 →transform创建了新包含块，参照系变了 - 父容器是空
div且无宽高，left: 20%算出来是0px→ 包含块宽度为0，百分比失效
margin-top: 20% 和 top: 20% 基准完全不同
这是最常混淆的点：margin-top、margin-bottom、left、right 全部以包含块的 宽度 为基准；而 top、bottom 虽然也写百分比，但规范强制它们也按 宽度 算（不是高度），和 margin 一样。
所以别指望 top: 50% + margin-top: -50% 能垂直居中——前者按宽，后者也按宽，两者毫无对称关系。
使用场景：
- 绝对定位子元素设
margin-top: 10%→ 看最近非static祖先的width -
position: fixed元素的margin-left: 10%→ 直接按视口宽度（vw）算 - 嵌套多层
relative，但只有一层真正被用作包含块 → 中间未定位层完全被忽略
为什么 width: auto 在绝对定位下会坍缩？
普通流中 width: auto 是靠解盒模型等式推出来的；绝对定位后，浏览器改用另一套逻辑：由 left、right、width 三者共同约束。没设 left 和 right 时，width: auto 就退化为内容最小宽度——空 div 变成 0×0，文字只占一行宽。
修复方式不是加 width: 100%，而是：
- 要撑满横向空间 → 写
left: 0; right: 0（此时width自动计算，不受margin干扰） - 要留边距 → 用
left: 20px; right: 20px，别依赖margin撑开 - 父容器本身宽高塌陷 → 先确保它有可计算的
width（比如width: 100%、min-width: 0或触发 BFC）
绝对定位元素的 height: auto 为什么是 0？
它不继承子内容高度，也不响应父容器高度变化。默认就是 0，除非满足以下任一条件：
- 显式写了
height或max-height - 同时设了
top和bottom（此时高度 = 包含块高度 − top − bottom） - 内容本身有固有尺寸（如图片、带行高的文本），且未被
overflow: hidden截断
注意：padding-bottom: 100% 这类技巧在绝对定位里依然有效，因为它也按包含块宽度算——但前提是那个“包含块”真有宽度。
真正容易被忽略的是：你调的每一个百分比，背后都绑着一个可能并不存在的包含块。查不到，就 fallback 到视口；算不出宽，结果就是 0。别怪 CSS 不讲理，它只是严格执行规范而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
