relative定位使元素相对原位置偏移且保留原有空间，通过top、right、bottom、left调整位置，常用于微调布局或作为absolute定位的参照父级。
在CSS中，relative定位是一种非常实用的布局方式，它允许元素在原来的位置基础上进行偏移，同时仍然保留其在文档流中的原始空间，不会影响其他元素的排列。
relative定位的基本特点
当一个元素设置为 position: relative; 时，它的定位是相对于自身原本在文档流中的位置。你可以通过 top、right、bottom、left 属性来调整它的显示位置。
关键点在于：即使元素被移动了，它原先占据的空间依然被保留，其他元素不会填补这个空隙，也不会因为它的移动而重新排布。
如何使用relative实现偏移
给元素添加以下CSS样式即可实现偏移：
立即学习“前端免费学习笔记（深入）”；
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 
.box {
position: relative;
top: 20px;
left: 10px;
}
上面代码表示该元素视觉上向下移动20像素，向右移动10像素，但它原本的位置仍被占用，页面布局不受影响。
应用场景举例
relative常用于需要微调某个元素位置，又不想打乱整体布局的情况：
表单中轻微调整图标位置 覆盖层或提示文字的小幅位移 作为绝对定位元素的包含块（祖先元素设为relative，内部absolute元素可相对它定位）
基本上就这些。relative定位不复杂，但非常实用，尤其在需要保持文档流稳定的同时做视觉调整时特别有用。
以上就是在css中relative定位实现偏移而不脱离文档流的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1004892.html
微信扫一扫 
支付宝扫一扫 
