在CSS布局中，top、right、bottom、left四个属性用于定义元素相对于其定位参考边界的偏移距离，是控制元素位置的核心属性。这四个属性只有在元素的position属性取值不为static时才会生效，static是元素的默认定位方式，此时设置这四个属性不会产生任何布局变化。
属性的基本含义
四个属性分别对应元素四个方向的边界偏移规则：
- top：定义元素上边界距离参考上边界的偏移量，正值会让元素向下移动，负值向上移动
- right：定义元素右边界距离参考右边界的偏移量，正值会让元素向左移动，负值向右移动
- bottom：定义元素下边界距离参考下边界的偏移量，正值会让元素向上移动，负值向下移动
- left：定义元素左边界距离参考左边界的偏移量，正值会让元素向右移动，负值向左移动
不同定位模式下的参考边界
参考边界的选取由position属性的取值决定，常见的定位模式对应的参考规则如下：
| position取值 | 参考边界说明 |
|---|---|
| relative | 参考边界为元素自身原本在标准流中的位置边界，偏移后原位置仍会保留空间 |
| absolute | 参考边界为最近的非static定位的祖先元素的边界，如果没有则参考视口边界 |
| fixed | 参考边界为浏览器视口的边界，滚动页面时元素位置固定不变 |
| sticky | 参考边界为最近的滚动祖先的边界，在阈值范围内表现为relative，超过后表现为fixed |
实用代码示例
相对定位下的边界控制
相对定位下元素偏移后原位置保留，适合做小幅位置调整：
/* 相对定位示例 */
.relative-box {
position: relative;
/* 上边界距离原位置上边界20px，元素向下移动20px */
top: 20px;
/* 左边界距离原位置左边界30px，元素向右移动30px */
left: 30px;
width: 100px;
height: 100px;
background-color: #409eff;
}
绝对定位下的边界控制
绝对定位常用于实现元素在容器内的精准定位，比如让元素居中：
/* 绝对定位居中示例 */
.container {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.center-box {
position: absolute;
/* 上下左右都设置为0，配合margin自动居中 */
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 80px;
height: 80px;
background-color: #f56c6c;
}
固定定位下的边界控制
固定定位适合实现悬浮按钮、顶部导航栏等固定位置元素：
/* 固定定位悬浮按钮示例 */
.fixed-btn {
position: fixed;
/* 距离视口右边界20px */
right: 20px;
/* 距离视口下边界30px */
bottom: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #67c23a;
color: #fff;
border: none;
cursor: pointer;
}
常见注意事项
使用这四个属性时需要注意几个常见问题：
- 如果同时设置top和bottom，且元素高度未固定，元素高度会被拉伸以填满两个边界之间的空间，left和right同理
- 属性值可以使用px、em、rem、百分比等单位，百分比参考的是参考边界对应方向的尺寸
- 当元素设置浮动（float）时，top、right、bottom、left属性不会生效，因为浮动元素的position默认是static
- z-index属性可以控制定位元素的层叠顺序，和这四个边界属性配合可以实现复杂的层叠布局
需要注意的是，top、right、bottom、left属性仅控制元素的偏移位置，不会影响元素本身的尺寸，除非同时设置了对立方向的属性且元素对应尺寸未固定。