相对定位不脱离文档流，元素仍占原位置，通过top、left等属性相对于自身偏移，常用于微调或作为绝对定位的参考父级；2. 绝对定位脱离文档流，不占空间，相对于最近的已定位祖先元素进行定位，适用于弹窗、悬浮按钮等需要精确控制的场景；3. 两者核心区别在于是否脱离文档流、定位基准不同及空间占用情况，正确理解有助于精准布局控制。
相对定位（relative）和绝对定位（absolute）是CSS中常用的两种定位方式，它们都通过 position 属性设置，但行为上有明显区别。
1. 相对定位（position: relative）
元素设置为 relative 时，它仍然占据原来在文档流中的位置。你可以通过 top、right、bottom、left 属性相对于自身原本的位置进行偏移。
不脱离文档流 偏移后原位置仍被保留 常用于微调元素位置或作为绝对定位的参考父容器
示例：
这个元素向右移动20px，向下移动10px，但原来的空间还在。
2. 绝对定位（position: absolute）
元素设置为 absolute 后，会脱离正常的文档流，不再占据空间。它的定位是相对于最近的已定位祖先元素（即 position 为 relative、absolute 或 fixed 的祖先），如果没有这样的祖先，则相对于初始包含块（通常是视口）。
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情
立即学习“前端免费学习笔记（深入）”；
脱离文档流，不影响其他元素布局 定位参考点是最近的已定位祖先元素 常用于弹窗、悬浮按钮、精确布局控制等场景
示例：
这个元素相对于外层div定位到左上角。
关键区别总结
文档流影响： relative 不脱离，absolute 脱离 定位基准： relative 相对自己原位置，absolute 相对于最近的已定位祖先 空间占用： relative 仍占位，absolute 不占位 使用场景： relative 多用于调整位置或设为父容器，absolute 多用于精确定位子元素基本上就这些。理解它们的定位机制，能更好控制页面布局结构。
以上就是CSS相对定位和绝对定位有什么区别_relative与absolute比较的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/963246.html
微信扫一扫 
支付宝扫一扫 
