百分比定位的参照对象取决于定位方式：absolute的top/left参照包含块内容区高度，relative则参照元素自身宽高；父容器未设height或position会导致基准漂移，需显式设置relative并检查computed值。
百分比定位的“百分比”到底参照谁
不是所有百分比都一样——top/left在position: absolute和position: relative下，参照对象完全不同，这是偏差最大的根源。
-
position: absolute的top: 20%：参照**包含块（containing block）的内容区高度**，通常是最近的position: relative/absolute/fixed父容器，且只算它的width/height（不含padding、border） -
position: relative的top: 20%：参照**元素自身高度**，和父容器尺寸完全无关；left: 20%则参照自身宽度 - 如果父容器没设
height（比如height: auto），那它的内容区高度就是0，子元素top: 50%就等于top: 0px，看起来“没动”
父容器没显式设position，基准就飘了
绝对定位元素会一路向上找第一个非static的祖先。如果没找到，就 fallback 到<html>；而<html>在不同浏览器或重置样式下，可能有隐式margin或border，导致top: 0实际离视口顶部有几像素偏差。
- 常见表现：Chrome里位置准，Safari里下移2px，IE里又偏右——根本原因就是参照的包含块不一致
- 解决方法：给直接包裹子元素的父容器加
position: relative（哪怕只是空声明），立刻锁定基准 - 注意：
transform（哪怕transform: translateZ(0)）会让父容器创建新的包含块，此时top就按这个transform元素的border box算，不是原父容器
移动端缩放时百分比突然“跑偏”
视口缩放（Ctrl+滚轮、iOS捏合）不触发resize事件，但会改变设备像素比和渲染映射关系。这时top: 30%仍按缩放前的父容器高度计算，而父容器视觉尺寸已变，结果就是错位。
- 典型现象：缩放后弹窗上边缘从距顶20%变成距顶5%，再缩回来也不恢复
- 根本原因：父容器高度由内容撑开，缩放后内容重排但高度未更新，百分比计算值滞后
- 更稳的替代方案：
top: 20vh（始终相对于当前视口），或用transform: translateY(20%)（基于自身高度，缩放不影响比例） - 必须配齐
<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端连基准视口都不可靠
盒模型和布局上下文悄悄改了参照系
百分比宽高不是简单除法，它被box-sizing、float、flex、grid层层过滤。漏掉任意一层，计算就失真。
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
display: flex但没设height，子元素height: 100%无效——因为flex容器本身高度是auto，无基准可依 - 父容器
box-sizing: content-box且带padding: 20px，子元素width: 100%会溢出（内容区宽 = 父总宽 - 40px） - 浮动父容器的包含块仍是块级祖先的内容区；但绝对定位子元素的包含块，却是该浮动父容器的padding box（特例！）
- 调试建议：用开发者工具点开目标元素 →「Computed」→ 查
height和width是否为具体像素值；如果是auto或0px，说明链路断了
真正容易被忽略的，是没确认“包含块”的实际尺寸——它可能被overflow: hidden裁剪、被transform隔离、被flex-basis覆盖，甚至被一行min-height: 0悄悄禁用。别只看CSS写了什么，得进开发者工具一层层点开看 computed 值。
