top、right、bottom、left仅在position为relative、absolute、fixed或sticky时生效；absolute/fixed定位下，同时设置对立属性可拉伸元素，relative定位则以top/left优先，auto值用于自动计算布局，合理组合可实现精准定位与响应式设计。
当使用CSS定位时，top、right、bottom、left 这四个偏移属性用于控制定位元素的位置。它们只有在元素的 position 属性值为 relative、absolute、fixed 或 sticky 时才生效。理解它们如何结合使用，对精准布局至关重要。
1. 偏移属性的基本作用
这四个属性定义了元素相对于其定位上下文的偏移距离：
- top：元素上边缘距离定位父容器上边缘的距离
- right：元素右边缘距离定位父容器右边缘的距离
- bottom：元素下边缘距离定位父容器下边缘的距离
- left：元素左边缘距离定位父容器左边缘的距离
这些值可以是像素、百分比、em 等长度单位，也可以是 auto（默认值）。
2. 结合使用的规则与行为
当同时设置多个方向的偏移时，浏览器会根据 position 的类型 和 书写方向（ltr/rtl） 来决定如何解析。
立即学习“前端免费学习笔记（深入）”；
对于绝对定位（position: absolute）和固定定位（position: fixed）：
- 同时设置 top 和 bottom，且都非 auto，元素会被垂直拉伸，高度由内容或 margin 决定（类似 stretch 行为）
- 同时设置 left 和 right，且都非 auto，元素会被水平拉伸，宽度由内容或 margin 控制
- 如果只设置 top 和 left，元素会从左上角偏移，这是最常见用法
- 若设置 top、right、bottom、left 全部为具体值，元素将被完全撑满定位容器（减去边距）
示例：
.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
这个模态框距离视口四边各 20px，形成一个内边距式窗口。
3. relative 定位下的表现
相对定位元素仍占据原文档流位置，偏移是相对于自身原本位置进行的。
- 可同时使用 top 和 bottom，但 bottom 优先级较低，通常只建议使用一对（如 top 和 left）
- 若同时设置 top 和 bottom，top 生效，bottom 被忽略；同理，left 优先于 right
不推荐在 relative 中使用对立方向同时赋值，容易造成误解。
4. auto 的关键作用
auto 是默认值，表示“不强制偏移”。它的存在让浏览器能根据其他属性自动计算位置。
- 设置 left: 0; right: 0; 可使元素水平拉伸占满可用空间
- 设置 top: 10px; bottom: 10px; 会让元素在垂直方向拉伸，上下留白 10px
- 若某方向未设置，等同于该方向为 auto
例如实现一个顶部通栏：
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
}
这样元素贴顶，左右延展至父容器边缘。
基本上就这些。掌握 top、right、bottom、left 的组合逻辑，能更灵活地控制定位元素的尺寸与位置，尤其在响应式布局和层叠组件中非常实用。
