relative不脱离文档流，相对于自身原位置偏移，原空间保留；2. absolute脱离文档流，相对于最近的已定位祖先元素定位，无则相对视口；3. relative不影响布局，absolute可能引发其他元素位置变化，常用于弹窗、悬浮等场景。
在CSS中，relative和absolute是两种常见的定位方式，它们决定了元素如何在页面中定位，但行为上有本质区别。
设置 position: relative; 的元素仍然占据它在文档流中的原始位置。你可以通过 top、right、bottom、left 属性来调整它的显示位置，但这个偏移是相对于它原本的位置进行的，不会影响其他元素的布局。
设置 position: absolute; 的元素会完全脱离文档流，不占据任何空间。它的定位基准是“最近的已定位（即 position 为 relative、absolute 或 fixed）的祖先元素”。如果没有这样的祖先，则相对于初始包含块（通常是视口）。
基本上就这些。理解清楚它们的定位机制，就能更灵活地控制页面布局。不复杂但容易忽略的是父级是否设置了定位，这对 absolute 至关重要。
立即学习“前端免费学习笔记（深入）”；
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
174
收藏
