定位前必须设置position属性，否则top/left等偏移无效；已定位元素指position为relative、absolute、fixed或sticky的元素。
定位前必须设置 position 属性
直接写 top、left 等值不会生效，因为这些偏移属性只对「已定位元素」起作用。所谓已定位，是指 position 值为 relative、absolute、fixed 或 sticky 的元素。
常见错误：只写 top: 20px; 却没设 position，结果元素纹丝不动。
-
position: relative;—— 相对于自身原始位置偏移，不脱离文档流 -
position: absolute;—— 相对于最近的「已定位祖先」偏移；若无，则相对于初始包含块（通常是视口） -
position: fixed;—— 相对于视口偏移，滚动时固定不动 -
position: sticky;—— 在阈值内表现如relative，超出后像fixed
absolute 定位时 top/left/right/bottom 的行为逻辑
当同时设置 top 和 bottom（或 left 和 right），浏览器会按「尺寸约束」来解析：如果元素没有显式 height 或 width，则对应方向的尺寸由偏移值共同决定。
例如：
.box {
position: absolute;
top: 10px;
bottom: 20px;
left: 15px;
right: 25px;
}此时元素高度 = 父容器高 − 10px − 20px，宽度同理。
- 只设
top和left：最常用，等效于“左上角锚定” - 只设
top和right：右上角锚定，宽度需靠内容撑开或手动设width - 设
top、right、bottom：自动计算高度和宽度，适合全向贴边布局 - 同时设
top和bottom但未设height：高度由两者推导，不是“取最大值”
relative 定位下偏移值的参考系是自身原位置
position: relative; 的元素仍占据原来的空间，top、left 等只是视觉上移动它，不影响其他元素布局。
立即学习“前端免费学习笔记（深入）”；
典型用途：微调按钮位置、实现下拉菜单的触发点偏移、配合 z-index 控制叠层顺序。
-
top: -5px;会让元素向上挪 5px，但下方空白还在 - 不能用
relative把元素“拖出”父容器做悬浮效果（它仍受父容器 overflow 影响） - 若父容器有
overflow: hidden;，且子元素relative向外偏移，超出部分会被裁剪
fixed 定位的常见陷阱：父级 transform 会重置包含块
按规范，position: fixed; 应该相对于视口定位，但如果任意祖先元素设置了 transform、perspective 或 filter（哪怕值为 none），就会创建新的包含块，导致 fixed 元素改为相对该祖先定位。
这种行为在 Chrome/Firefox 中已成事实标准，但容易被忽略，造成“本该固定在屏幕右下，却跟着滚动”的问题。
- 检查祖先链中是否有
transform: translateZ(0);或类似 hack - 临时加
transform: none !important;可验证是否为此原因 - 替代方案：用
position: absolute;+ JS 监听 scroll 手动更新top/left（不推荐，性能差） - 更稳妥做法：把
fixed元素提级到下，避开干扰祖先
transform 就能让 fixed 失效。 
