top: 20%和left: 20%不在真正对角线上，因top百分比基于父高、left基于父宽，二者基准不同；宽高比非1:1时数值不等，仅形成映射直线而非几何对角线。
绝对定位元素的百分比值不是“看起来像多少”，而是严格按包含块尺寸计算出来的具体像素——父容器没设 position: relative，它就去算 <html> 的宽高；父容器高度是 auto，top: 30% 就直接失效。
为什么 top: 20% 和 left: 20% 不在对角线上？
因为 top 百分比基于父容器**高度**，left 百分比基于父容器**宽度**，二者基准不同。当父容器宽高比不是 1:1（比如 1200×800），20% 高 ≠ 20% 宽，元素不会落在几何对角线上，只是落在一条映射直线上。
- 想让元素沿真正对角线移动，得手动保持
top和left的数值比例一致（如top: 30%; left: 45%），但响应式下宽高比一变，位置就漂移 -
top: 50%; left: 50%只让元素左上角对齐中心点，视觉上偏左上；必须加transform: translate(-50%, -50%)才能居中 - 如果父容器没有显式
height（比如height: auto且无内容撑开），top的百分比会按 0 计算，元素直接贴顶
width: 100% 在 position: absolute 元素上为啥经常错？
它不认 HTML 结构上的“父元素”，只找最近的**已定位祖先**（position 值为 relative、absolute、fixed 或 sticky）。找不到就 fallback 到 <html>，结果宽度变成视口宽。
- 修复方法：给**直接父容器**加
position: relative（副作用最小） - 如果父容器宽度是
auto，即使加了relative，width: 100%仍可能算出 0 —— 这时要显式设父宽，或改用left: 0; right: 0; -
left: 0; right: 0;更可靠：它不依赖定位上下文是否建对，直接拉伸到包含块左右边缘，还天然支持留白（如left: 20px; right: 20px;）
响应式下怎么让绝对定位元素“稳住”？
别用固定像素（px），也别只依赖父容器百分比；视口单位（vh/vw）和明确的定位上下文才是关键。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，且要有明确尺寸（如height: 100vh），否则子元素的top/left百分比失去参照 - 子元素定位优先用
vh/vw（如top: 10vh; left: 5vw;），它们始终相对于视口，不受父容器缩放影响 - 避免把
position: fixed和display: flex混用：fixed 元素脱离文档流，flex 的justify-content和align-items对它完全无效
最常被忽略的一点：浏览器 DevTools 的 “Computed” 面板里，点开 top 或 width，看它的 “Computed value” 和 “Reference box”，能立刻确认它到底在跟谁算百分比——这比猜结构快十倍。
