百分比定位常偏移是因为top/left等值基于包含块宽高计算，而非父元素内容区或视口；若包含块高度为0（如父元素未设height），则20%即0px。
百分比定位为什么经常“偏移”？
因为 top/left/right/bottom 的百分比，是相对于**包含块（containing block）的高度或宽度**计算的，不是父元素内容区，更不是视口。常见错误是以为 top: 20% 会从视口顶部下移 20%，结果发现它动都不动——那是因为父元素没设 height，导致包含块高度为 0，20% 就是 0px。
- 绝对定位元素的包含块，默认是最近的
position不为static的祖先；若无，则是初始包含块（通常是视口） - 相对定位元素的百分比偏移，也是基于自身原始尺寸计算，但不会影响文档流，这点常被误用
- 想让
top: 10%真正响应视口？得确保包含块高度可预测，比如给父级加height: 100vh或用min-height: 100vh
absolute + 百分比 + transform 怎么居中一个元素？
单靠 left: 50% 和 top: 50% 只能把元素左上角甩到中心点，实际视觉是偏右下。必须用 transform: translate(-50%, -50%) 回拉自身宽高的一半。
-
transform的百分比是相对于元素自身尺寸，和定位属性的百分比来源完全不同，这点必须分清 - 不要写成
margin-left: -50%—— 那是相对于父容器宽度，一旦父变窄，偏移量就错乱 - 如果元素宽高不固定（比如文字块），
transform依然可靠；但margin类方案在未知尺寸时基本不可用
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
用 vw/vh 替代百分比是否更稳？
是，但有代价。vw/vh 直接基于视口，跳过了包含块依赖，适合全屏类布局；但它对缩放、移动端地址栏显隐敏感——Safari 在地址栏收起时会重算 vh，导致布局跳动。
-
100vh≠ 屏幕可用高度：iOS Safari 中，地址栏展开时vh值会变小，内容可能被截断 - 需要视口高度稳定？优先考虑
100dvh（dynamic viewport height），Chrome 105+、Safari 16.4+ 支持，它始终取当前可见区域高度 - 兼容老浏览器？回退方案别只写
height: 100vh，加一行min-height: 100vh或用 JS 补偿（但 JS 方案本身有闪动风险）
fixed 定位配合百分比，为什么滚动时位置“粘不住”？
position: fixed 的包含块是视口，所以 left: 10% 确实是视口宽度的 10%。但问题常出在祖先元素用了 transform、perspective 或 filter——这些属性会**创建新的包含块**，把 fixed 元素“降级”成相对于该祖先定位，失去视口锚定。
- 检查父级是否有
transform: translateZ(0)或filter: blur(1px)，这些看似无害的 hack 很容易破坏fixed - 移动端 WebKit 中，
overflow: scroll的容器内fixed元素可能表现异常，尤其在 iOS 15 以下 - 真要嵌套又需
fixed效果？改用position: sticky+top: 0，它对包含块不敏感，且天然支持滚动边界
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
