相对定位通过position: relative使元素相对于原位置偏移，示例中.box下移20px、右移10px，元素仍占原空间，常用于微调布局或为绝对定位提供参照，如.button上移5px不影响其他元素。
在CSS中，相对定位（relative） 是指元素相对于它在正常文档流中的原始位置进行偏移。设置
position: relative;
给一个元素设置相对定位，只需将其
position
relative
top
right
bottom
left
示例代码：
.box {
position: relative;
top: 20px;
left: 10px;
}
上面的样式会让 .box 元素在其原本位置的基础上，向下移动 20px，向右移动 10px。
立即学习“前端免费学习笔记（深入）”；
top
bottom
left
right
比如你想微调某个按钮的位置，又不想影响页面其他布局，就可以用 relative。
.button {
position: relative;
top: -5px; /* 往上微调 */
}
这样按钮看起来上移了 5px，但原来的位置仍然被保留，不会导致其他元素“补位”或错乱。
基本上就这些。相对定位简单实用，是布局中非常基础且常用的技巧。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
701
收藏
