相对定位通过position: relative使元素相对于原位置偏移，示例中.box下移20px、右移10px，元素仍占原空间，常用于微调布局或为绝对定位提供参照，如.button上移5px不影响其他元素。
在CSS中，相对定位（relative） 是指元素相对于它在正常文档流中的原始位置进行偏移。设置
position: relative;
不会将元素从文档流中移除，其他元素仍会像它没有移动一样布局。
如何使用 position: relative
给一个元素设置相对定位，只需将其
position
属性设为
relative
，然后通过
top
、
right
、
bottom
或
left
来调整它的位置。
示例代码：
.box { position: relative; top: 20px; left: 10px;}
上面的样式会让 .box 元素在其原本位置的基础上，向下移动 20px，向右移动 10px。
立即学习“前端免费学习笔记（深入）”；
Seede AI
AI 驱动的设计工具
586 查看详情
相对定位的关键特点
元素仍占据原来在文档流中的空间，即使它已经视觉上偏移了。偏移方向由
top
、
bottom
、
left
、
right
控制，值可以是像素、百分比等。常用于为绝对定位的子元素提供定位上下文（即父元素设为 relative，子元素可设为 absolute 并相对于父元素定位）。
实际应用场景
比如你想微调某个按钮的位置，又不想影响页面其他布局，就可以用 relative。
.button { position: relative; top: -5px; /* 往上微调 */}
这样按钮看起来上移了 5px，但原来的位置仍然被保留，不会导致其他元素“补位”或错乱。
基本上就这些。相对定位简单实用，是布局中非常基础且常用的技巧。
以上就是如何在css中实现相对定位relative的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1064188.html
微信扫一扫 
支付宝扫一扫 
