top/left/right/bottom仅在position为relative、absolute、fixed或sticky时生效；static下被忽略，且各属性锚点不同、冲突时有明确优先级。
position 的取值决定了 top/left/right/bottom 是否生效
很多初学者写完 top: 20px 却没效果，根本原因就是父容器或自身 position 值不对。只有当元素的 position 是 relative、absolute、fixed 或 sticky 时，top/left/right/bottom 才会起作用；static（默认值）下这些偏移属性完全被忽略。
常见误用场景：
- 想微调一个普通段落位置，直接加
top: 10px—— 无效，必须先设position: relative - 用
absolute定位子元素，但忘了给父容器设position: relative—— 子元素会相对于最近的「已定位祖先」或 viewport 定位，结果飘走 -
fixed元素在 iOS Safari 中不随键盘弹出而上移，需额外监听focus做补偿
top/left/right/bottom 的参考系完全不同
它们不是统一按“某个方向”计算，而是各自有明确的锚点：
-
top：距离**定位上下文顶部**的距离（不是父元素 content-box 顶部） -
left：距离**定位上下文左侧**的距离 -
right：距离**定位上下文右侧**的距离（注意：和left冲突时，left优先级更高） -
bottom：距离**定位上下文底部**的距离（和top冲突时，top优先）
例如：
div {
position: absolute;
top: 20px;
bottom: 30px;
}此时元素高度由上下偏移共同约束，浏览器会自动计算高度为「父容器高 − 50px」；但如果同时写了 top 和 height，bottom 就会被忽略。
absolute 定位中 left/right 同时设置的特殊行为
当 position: absolute 元素同时指定 left 和 right（且未设 width），浏览器会拉伸该元素填满左右偏移之间的空间：
立即学习“前端免费学习笔记（深入）”；
.fill-x {
position: absolute;
left: 20px;
right: 20px;
/* width 不写，元素自动撑满中间区域 */
}这个技巧常用于全宽导航栏内缩容器，但要注意：
- 若父容器宽度未知或动态变化，这种写法比
width: calc(100% - 40px)更健壮 - 如果还设置了
margin-left: auto或transform，可能覆盖或干扰该行为 - 在 flex 或 grid 容器中混用时，需确认父容器是否构成新的定位上下文
sticky 定位下 top 和 bottom 的互斥性
position: sticky 实际是 relative 和 fixed 的混合体，但只支持 top 或 bottom 之一生效（不能同时设）：
- 设
top: 10px→ 滚动到距视口顶部 10px 时“粘住” - 设
bottom: 10px→ 滚动到底部触发粘住（仅在容器可滚动且内容足够长时才可见） - 若同时写
top和bottom，浏览器只认第一个声明（CSS 级联规则），后者被丢弃
另外，sticky 要求父容器有明确高度或可滚动区域，否则表现和 relative 无异。iOS Safari 15.4+ 才完整支持 bottom 行为，旧版本慎用。
实际项目中最容易漏掉的是定位上下文的显式声明，以及对「冲突属性优先级」的误判——比如以为 right 和 left 可以共存控制宽度，其实它们是互斥锚点。写完记得用浏览器开发者工具 hover 查看 computed position 值，确认是否进入预期的定位模式。
