left 百分比的计算基准是最近已定位祖先的包含块宽度，而非父容器宽度；若父元素未设position:relative或自身宽高塌陷，则left百分比失效；left和margin-left均以包含块宽度为基准，top/bottom同理；父元素带transform会创建新包含块，改变参照系。
百分比 left 的计算基准不是父容器宽度，而是“最近已定位祖先”的宽度
很多人以为 left: 20% 是按父元素的 width 算的，其实不是。它真正参照的是**最近一个 position 不为 static 的祖先元素**（即 relative、absolute、fixed 或 sticky）的**包含块宽度**。如果父元素没设 position: relative，浏览器就会跳过它，继续往上找——可能落到 body 上；而 body 默认 height: auto; width: auto，它的宽度在某些上下文中不可靠（比如在 flex 容器里被压缩），导致 left: 20% 算出意外值。
父容器宽高塌陷时，left 百分比会失效或归零
即使加了 position: relative，如果父容器本身没有明确宽度（例如：未设 width、max-width，也没被 flex/grid 分配轨道尺寸，且内容为空或未撑开），它的宽度就是 0。这时 left: 50% 就等于 0px，元素看起来“消失”或紧贴左边缘。
- 检查方式：用 DevTools 选中父元素，看
Computed面板里的width是否为0px - 常见诱因：父容器是空
div、仅含display: inline内容、或被float未清除导致高度塌陷 - 修复建议：显式设置
width: 100%、min-width: 0（对 flex 子项）、或用aspect-ratio触发尺寸生成
left 百分比和 margin-left 百分比参照物完全不同
这是最容易混淆的点：left: 20% 看的是**包含块的高度？不，是宽度**（没错，top/bottom/left/right 百分比全以包含块的**宽度**为基准）；而 margin-left: 20% 看的也是包含块宽度——这点倒是一致。但 top: 20% 和 margin-top: 20% 就不同了：top 看宽度，margin-top 也看宽度（不是高度！）。所以别指望 margin-top: 20% 能模拟“父高 20%”的效果。
- 验证方法：给父容器加
padding: 30px+box-sizing: border-box，再测left: 10%，你会发现它按内容区宽度算，不是外边总宽 - 风险场景：在移动端 viewport 缩放后，
calc(10% + 10px)中的%基准可能因缩放抖动，结果不稳定
父元素带 transform 会让 left 百分比参照系突变
只要父元素设置了任何非 none 的 transform（比如 rotate(5deg)、translateZ(0)），它就创建了一个新的包含块，left 百分比就不再基于原始布局框，而是基于**该 transform 后的内容区左上角**。此时即使你写了 left: 0，元素也可能视觉上偏移。
立即学习“前端免费学习笔记（深入）”；
- 快速诊断：在 DevTools 的
Computed面板查看子元素的offsetParent，如果指向的是那个带transform的父级，问题就在这 - 临时排查：给父元素加
outline: 1px solid red，对比子元素边框与 outline 的相对位置 - 根本解法：把需要绝对定位的子元素提到 transform 父级之外；或改用
inset（如inset: 10px auto auto 10px），它不依赖包含块坐标系
position: relative 这一行必须存在，且父容器得有可测量的宽度，二者缺一不可**。很多“百分比失效”问题，查到最后只是少了一个 width: 100% 或多了一个隐藏的 transform。 
