使用 top、left、right、bottom 控制定位时，必须将元素设置为 position: absolute；此时元素脱离文档流，相对于最近的已定位祖先（position 为 relative、absolute、fixed 或 sticky）进行定位，若无则相对视口；通过设置这些偏移属性可精确控制位置，如 .child 设为 absolute 并设置 top: 20px、left: 30px，则在 relative 定位的父容器内距上 20px、左 30px 处显示；同时使用 left 与 right 或 top 与 bottom 可使元素拉伸以填充空间，常用于模态框、侧边栏等布局；典型应用包括悬浮按钮、弹出菜单、图层叠加和居中定位，关键在于为子元素提供一个 relative 定位的父容器作为参考。
使用 top、left、right、bottom 控制元素位置时，必须将该元素的定位方式设置为 absolute（绝对定位）。这些属性不会对普通文档流中的元素生效，只有在脱离文档流后才能真正起作用。
absolute 定位的基本原理
当一个元素设置为 position: absolute; 后，它会从正常文档流中移除，并相对于最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先）进行定位。如果没有这样的祖先，则相对于初始包含块（通常是视口）。
此时，使用 top、left、right、bottom 可以精确控制元素的位置：
- top：定义元素上边缘距离其定位父级上边缘的距离
- left：定义元素左边缘距离其定位父级左边缘的距离
- right：定义元素右边缘距离其定位父级右边缘的距离
- bottom：定义元素下边缘距离其定位父级下边缘的距离
如何正确使用 absolute 和方位属性
确保父容器设置了相对定位，这样子元素才能以它为参考点：
立即学习“前端免费学习笔记（深入）”；
.parent {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.child {
position: absolute;
top: 20px;
left: 30px;
width: 100px;
height: 50px;
background-color: #007acc;
}
在这个例子中，.child 元素会出现在 .parent 内部距离上方 20px、左侧 30px 的位置。
同时使用对立属性的效果
可以同时设置 left 和 right，或 top 和 bottom，这时元素会被“拉伸”，相当于设置宽度或高度：
- 设置
left: 10px; right: 10px;会让元素左右各留 10px 边距，宽度自动填充中间区域 - 设置
top: 5px; bottom: 5px;会让元素高度自适应，上下保留 5px 空间
这种技巧常用于模态框、侧边栏或全屏遮罩的布局。
常见应用场景
- 悬浮按钮：固定在页面某个角落，如右下角
- 弹出菜单或提示框：相对于触发元素精确定位
- 图层叠加：多个元素堆叠在一起，通过 z-index 控制层级
- 居中定位：配合负边距或 transform 实现水平垂直居中
基本上就这些。只要记住：想用 top/left/right/bottom，先设 position: absolute，再找一个带 position: relative 的父容器即可。不复杂但容易忽略细节。
