position: absolute的top/left百分比参照包含块的内容区高度/宽度，而非父元素padding+border或视口；若父容器无非static定位且高度为auto，则包含块高度为0，导致top无效。
position: absolute 的 top/left 百分比怎么算
它参照的是**包含块（containing block）的内容区宽高**，不是父元素的 padding + border，也不是视口。如果父容器没设 position: relative 或其他非 static 值，包含块就往上找，最终可能是 html 元素。
常见错误现象：top: 50% 没效果，或偏移量远小于预期 —— 很可能因为父容器高度是 auto，导致包含块高度为 0，50% 就等于 0px。
- 确保包含块有明确高度（比如
height: 100vh、min-height: 400px，或由 flex/grid 布局撑开） - 避免对
body直接设top: 30%：默认body高度由内容决定，往往算出 0 -
left: 25%是相对于包含块宽度的 25%，和元素自身宽高无关
position: relative 的 top/left 百分比为什么总“不对劲”
它不看父容器，只按**元素自身宽高**算：top/bottom 百分比基于元素自身的 height，left/right 百分比基于元素自身的 width。
典型误判场景：一个 div 写了 width: 200px; height: 100px; position: relative; top: 50%，结果上移了 50px（不是父容器一半），而如果它没设 height，top: 50% 就等于 top: 0（因自身高度为 auto → 0）。
- 只有当元素有明确
width和height（像素、vh、flex 子项固定尺寸等）时，relative 的百分比才可预测 - 想微调相对父容器的位置？别硬套
relative百分比，改用absolute+ 已定位父级，或直接用transform: translateY(10%) -
transform的百分比也基于自身尺寸，但更可控，且不触发重排
background-position 的百分比怎么算
公式是：(容器宽度 − 图片宽度) × x% = 水平偏移像素，(容器高度 − 图片高度) × y% = 垂直偏移像素。也就是说，0% 0% 对齐左上角，100% 100% 对齐右下角，50% 50% 让图片中心对齐容器中心。
容易踩的坑：一张 400×300 的图放进 100×100 的容器里，background-position: 100% 100% 不是把图右下角贴到容器右下角，而是让图的右边缘对齐容器右边缘、底边缘对齐容器底边缘 —— 因为图比容器大，实际显示的是图的右下局部。
- 如果图比容器小，
50% 50%会让图居中；如果图比容器大，50% 50%会让图中心点对齐容器中心点 - 关键词和百分比可混用，比如
background-position: right 20px bottom 10px或left 25% top 30% - 避免在响应式容器里依赖固定像素偏移，优先用百分比或
vw/vh单位
margin-top 百分比为啥不按父高度算
W3C 规范强制规定：所有方向的百分比 margin（包括 margin-top 和 margin-bottom）都按**包含块的宽度**计算，不是高度。
所以 .parent { width: 300px; } .child { margin-top: 20%; } 算出来是 60px，哪怕父容器高 1000px。这个设计是为了保持水平/垂直方向行为一致，避免高度未定导致计算不稳定。
- 想实现“上边距为父高 20%”，只能换思路：用
padding-top（同样按宽度算）、transform: translateY()，或用grid/flex布局替代 margin -
padding-top和margin-top在这点上行为一致，都看包含块宽度 - 这个规则也适用于
height的百分比值 —— 它同样依赖包含块高度，若包含块高度未显式设置，结果就是 0
position、margin、background-position、transform 中各有一套参照系，漏查一层包含块或 box-sizing，偏移就会跑偏。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
