position: relative 是原地偏移且保留文档流，而 position: absolute 是脱离文档流的绝对定位。1. position: relative 元素仍占据原有空间，偏移基于自身原位置，常用于微调布局或作为 absolute 元素的定位参考；2. position: absolute 元素脱离文档流，不保留原有空间，定位基于最近的非 static 定位祖先元素，适合需要独立定位的场景；3. 使用时需注意：absolute 元素必须指定 top、left 等值，且其父容器最好设置为 relative 等定位方式以控制定位范围，同时通过 z-index 可调节堆叠层级。
在网页布局中，position: absolute 和 position: relative 是两个常用的定位方式，它们虽然都属于定位属性，但行为和使用场景差异很大。理解它们的区别，能帮助你更精准地控制元素的位置。
position: relative 是“原地偏移”
设置 position: relative 的元素，仍然保留在文档流中原本的位置。你可以通过 top、bottom、left、right 属性让它相对于自己原来的位置进行偏移，但不会脱离文档流，也不会影响其他元素的布局。
举个例子：
立即学习“前端免费学习笔记（深入）”；
.box { position: relative; top: 20px; left: 30px;}
这个 .box 元素会从它原本的位置向下移动20px，向右移动30px，但它原来的空间依然保留，其他内容不会填补它原来的位置。
常见用途包括：
LibLibAI
国内领先的AI创意平台，以海量模型、低门槛操作与“创作-分享-商业化”生态，让小白与专业创作者都能高效实现图文乃至视频创意表达。
159 查看详情 
微调元素位置而不影响整体布局作为 absolute 定位子元素的“参考点”
position: absolute 是“脱离文档流的绝对定位”
一旦设置了 position: absolute，元素就会完全脱离文档流，不再占据原来的空间。它的位置是相对于最近的设置了非 static 定位的祖先元素来确定的。如果没有这样的祖先，它就会一直向上找，直到视口或某个固定定位的祖先为止。
例如：
.parent { position: relative;}.child { position: absolute; top: 10px; left: 20px;}
在这个例子中，.child 会以 .parent 为参考点，出现在距离父元素上边10px、左边20px的位置。
需要注意的几点：
脱离文档流后，不影响其他元素布局必须明确指定 top、left 等值才能生效如果没有定位过的祖先元素，可能会跑到页面意想不到的位置
使用时的一些小技巧
想让一个 absolute 元素在某个容器内定位？那这个容器必须设置成 relative、absolute、fixed 或 sticky。多层嵌套定位时，注意层级关系，可以通过 z-index 控制堆叠顺序。relative 更适合微调，absolute 更适合独立定位。
基本上就这些。这两个属性看起来简单，但在实际开发中很容易因为理解不到位而出错，尤其是在复杂布局中。
以上就是CSS中position属性absolute和relative的区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1109560.html
微信扫一扫 
支付宝扫一扫 
