答案：top、left、right 和 bottom 需配合 position 使用，分别设置元素相对于包含块的偏移距离，其中 position 为 relative、absolute 或 fixed 时生效，常用于精确定位布局。
在CSS中，
top
、
left
、
right
和
bottom
是用于定位元素的偏移属性。它们不会对普通文档流中的元素起作用，只有当元素的
position
属性设置为
relative
、
absolute
或
fixed
时才会生效。
1. 定位上下文与 position 的关系
使用 top、left、right、bottom 前必须先设置元素的 position 属性：
position: relative
：相对于元素原本的位置进行偏移，不脱离文档流。
position: absolute
：相对于最近的已定位（非 static）祖先元素进行定位，脱离文档流。
position: fixed
：相对于视口（
浏览器
窗口）定位，常用于固定导航栏等。
2. 各属性的作用
这些属性定义元素边缘距离其包含块对应边的距离：
top
：元素上边缘距离包含块上边缘的距离。
bottom
：元素下边缘距离包含块下边缘的距离。
left
：元素左边缘距离包含块左边缘的距离。
right
：元素右边缘距离包含块右边缘的距离。
3. 实际用法示例
下面是一个使用 absolute 定位将元素放置在父容器右上角的例子：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
这里 .child 元素会出现在 .parent 内部距离上方 10px、右侧 10px 的位置。
4. 注意事项
如果同时设置
left
和
right
，且 width 固定，浏览器会根据书写方向（LTR/RTL）决定优先级。
对于
绝对定位
元素，可以只设置部分属性（如只设 top 和 left），未设置的方向可能由内容或其它样式决定大小。
使用
top: 0; right: 0; bottom: 0; left: 0;
并配合 margin 可实现居中或铺满效果。
基本上就这些。只要记得先设 position，再用偏移属性控制位置，就能灵活布局。
.parent {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.child {
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background-color: blue;
}