父元素设置 position: relative 为子元素 absolute 定位提供参考系，子元素需设 position: absolute 并配合 top/left/right/bottom 才能相对于父元素精确定位；若子元素使用 position: relative，则仅相对于自身原位置偏移，不脱离文档流，原有空间仍保留。
在 CSS 中，使用 relative 定位调整子元素位置时，需要明确：relative 本身是相对于元素自身原本位置进行偏移的。但要注意，子元素不能直接通过父元素的 relative 定位来控制自己的位置，除非子元素自身设置为 absolute 或其他定位方式。
1. 父元素设置 position: relative
父元素设置 position: relative 的主要作用是为子元素的绝对定位（absolute）创建一个参考容器。它本身不会移动父元素的位置，但可以作为子元素定位的基准点。
示例：
.parent { position: relative; width: 300px; height: 200px; background: #f0f0f0;}
2. 子元素使用 absolute + 偏移调整位置
子元素设置 position: absolute 后，会相对于最近的已定位祖先元素（即设置了 relative、absolute 或 fixed 的祖先）进行定位。
示例：
.child { position: absolute; top: 20px; left: 30px; background: #ffcc00;}
此时 .child 会从 .parent 的左上角开始，向右偏移 30px，向下偏移 20px。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
立即学习“前端免费学习笔记（深入）”；
3. 如果子元素也设为 relative
如果子元素只设置 position: relative，那么它的偏移是相对于自己原来的位置，不影响文档流中其他元素。
示例：
.child { position: relative; top: 10px; left: 15px;}
这会让子元素视觉上向下移动 10px，向右移动 15px，但原来的空间仍被保留，就像“影子还在”。
关键点总结
父元素设 position: relative 是为了给子元素 absolute 定位提供参照 子元素用 absolute + top/left/right/bottom 才能精确定位在父元素内 子元素用 relative 只能相对自己原位置微调，不脱离文档流 仅靠父元素 relative 无法直接“拉动”子元素位置基本上就这些。定位的关键是搞清参考系：relative 对自己，absolute 对最近的已定位祖先。
以上就是在css中如何通过relative调整子元素位置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/998405.html
微信扫一扫 
支付宝扫一扫 
