relative定位使元素相对于原位置偏移，仍占文档流空间，不影响其他元素布局；2. absolute定位使元素脱离文档流，不占空间，相对于最近的已定位祖先元素定位，常用于弹窗和精确布局。
在CSS中，relative 和 absolute 是两种常用的定位方式，它们控制元素在页面中的位置，但作用机制不同。
relative 定位：相对于自身原来的位置偏移
使用 position: relative; 的元素仍然保留在文档流中，它的偏移是基于它原本在页面上的正常位置进行的。设置 top、right、bottom、left 属性会使其相对于原来的位置移动，但不会影响其他元素的布局。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 元素仍占据原有空间 偏移不影响周围元素 常用于微调位置或作为 absolute 元素的定位参照
absolute 定位：脱离文档流，相对于最近的已定位祖先元素
使用 position: absolute; 的元素会完全脱离文档流，不占据任何空间。它的定位基准是最近的 position 为 relative、absolute 或 fixed 的祖先元素；如果没有这样的祖先，则相对于初始包含块（通常是视口）。
元素不再占据原始空间 定位基于最近的已定位祖先 常用于弹窗、悬浮层、精确布局控制
关键区别总结
文档流影响：relative 元素仍在流中，absolute 元素脱离流 定位基准：relative 相对自己原位置，absolute 相对于最近的已定位祖先 布局影响：relative 偏移不影响他人，absolute 可能导致内容重叠基本上就这些，理解清楚后能更灵活地控制页面布局。
以上就是在css中relative与absolute定位区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1009678.html
微信扫一扫 
支付宝扫一扫 
