top、right、bottom、left需配合position才能生效，用于控制定位元素相对于包含块的边界距离。1. position为relative、absolute、fixed或sticky时属性生效；2. 可单独设置方向偏移，也可同时使用拉伸尺寸；3. 常用于模态框居中、全屏遮罩、图标定位等布局场景，关键在于理解定位上下文与包含块机制。
在CSS中，top、right、bottom、left 是用于控制定位元素（positioned elements）边界位置的属性。它们不会对普通文档流中的元素起作用，必须配合 position 属性使用才能生效。
1. 设置定位上下文
要让 top、right、bottom、left 生效，元素的 position 值必须是以下之一：
- relative：相对于自身原本位置进行偏移
- absolute：相对于最近的已定位祖先元素进行定位
- fixed：相对于视口（浏览器窗口）固定定位
- sticky：根据滚动状态在相对和固定之间切换
div {
position: relative;
top: 10px;
right: 20px;
}
2. 各方向属性的作用
这些属性定义元素边缘距离其包含块对应边的距离：
- top：元素上边缘距离包含块上边缘的距离
- right：元素右边缘距离包含块右边缘的距离
- bottom：元素下边缘距离包含块下边缘的距离
- left：元素左边缘距离包含块左边缘的距离
注意：同时设置 left 和 right 可以拉伸元素宽度；top 和 bottom 可以拉伸高度，常用于布局填充。
立即学习“前端免费学习笔记（深入）”；
示例：让一个绝对定位元素填满父容器，内边距10px：.fill {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
3. 实际应用场景
这些属性常见于以下场景：
- 模态框居中显示：
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) - 全屏遮罩层：
top: 0; right: 0; bottom: 0; left: 0 - 图标定位在内容右上角：
position: absolute; top: 0; right: 0 - 侧边栏固定宽度，其余部分自适应：
left: 200px; right: 0
基本上就这些。关键是记住：没有 position，top/right/bottom/left 就不起作用。理解包含块和定位上下文，就能灵活控制元素边界。不复杂但容易忽略细节。
