定位前必须设置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 等只是视觉上移动它，不影响其他元素布局。
