相对定位不脱离文档流，元素仍占原位置，通过top、left等属性相对于自身偏移，常用于微调或作为绝对定位的参考父级；2. 绝对定位脱离文档流，不占空间，相对于最近的已定位祖先元素进行定位，适用于弹窗、悬浮按钮等需要精确控制的场景；3. 两者核心区别在于是否脱离文档流、定位基准不同及空间占用情况，正确理解有助于精准布局控制。
相对定位（relative）和绝对定位（absolute）是CSS中常用的两种定位方式，它们都通过 position 属性设置，但行为上有明显区别。
元素设置为 relative 时，它仍然占据原来在文档流中的位置。你可以通过 top、right、bottom、left 属性相对于自身原本的位置进行偏移。
示例：
元素设置为 absolute 后，会脱离正常的文档流，不再占据空间。它的定位是相对于最近的已定位祖先元素（即 position 为 relative、absolute 或 fixed 的祖先），如果没有这样的祖先，则相对于初始包含块（通常是视口）。
立即学习“前端免费学习笔记（深入）”；
示例：
以上就是CSS相对定位和绝对定位有什么区别_relative与absolute比较的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
487
收藏
