相对定位为绝对定位提供参考，子元素脱离文档流精确布局。父级设relative不占空间，子级用absolute通过top、left等定位，常用于徽标、弹窗；需注意最近定位祖先、z-index层叠与宽高控制。
在css布局中，relative和absolute定位经常结合使用，实现灵活的页面结构。理解它们的特性及相互关系，是掌握精准布局的关键。
relative与absolute的基本行为
relative定位的元素相对于其原本的位置进行偏移，但仍然占据文档流中的原始空间。它常被用作absolute元素的“定位上下文”。
absolute定位的元素脱离文档流，不再占据空间，其位置相对于最近的已定位祖先元素（即position为relative、absolute或fixed的祖先）。若没有这样的祖先，则相对于初始包含块（通常是视口）。
以relative作为absolute的参考容器
最常见的混合用法是：父元素设置position: relative，子元素设置position: absolute。这样子元素就能相对于父元素精确摆放。
立即学习“前端免费学习笔记（深入）”；
- 父级加relative不会影响布局，但为absolute子元素提供定位基准
- 子元素通过top、right、bottom、left精确定位，可覆盖、居中或悬浮在父元素某区域
- 适合做图标徽标、下拉菜单、模态框、文字覆盖图片等场景
示例：
.parent { position: relative; width: 200px; height: 150px; background: #eee; } .child { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; background: red; border-radius: 50%; }
这个例子中，红色小圆点会出现在父容器右上角外侧，常用于未读提示徽章。
多层混合布局的注意事项
当relative与absolute嵌套层级较多时，需注意：
- absolute元素只认最近的已定位祖先，跳过非定位元素
- 避免过度嵌套导致定位难以维护
- z-index可控制堆叠顺序，配合relative/absolute实现层叠效果
- absolute元素宽度默认由内容决定，如需撑满可用left=0, right=0
基本上就这些。掌握relative打地基、absolute自由定位的配合逻辑，能应对大多数复杂布局需求。关键在于明确谁是参考容器，以及是否脱离文档流。不复杂但容易忽略细节。