使用relative与absolute定位可实现子元素相对于父容器的精确布局。首先将父元素设置为position: relative，使其成为定位基准且不脱离文档流；再将子元素设为position: absolute，并通过top、left等属性相对于父元素定位。该方法常用于模态框、角标、下拉菜单及居中布局。需注意：若无已定位祖先，absolute元素会相对视口定位；其脱离文档流可能覆盖内容，需用z-index管理层级；父元素应有明确尺寸以避免高度塌陷。掌握“已定位祖先”概念是关键。
在CSS布局中，使用 relative 定位的父元素配合 absolute 定位的子元素是一种常见且强大的定位方式。它能让你精确控制子元素相对于父容器的位置，而不影响页面其他元素的布局。
设置父元素为 relative
要让 absolute 子元素以某个父容器为参考点，必须将该父元素的 position 设置为 relative。这样父元素不会脱离文档流，同时成为子元素的定位基准。
示例： .parent {
position: relative;
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
子元素使用 absolute 定位
将子元素设置为 position: absolute 后，它会脱离正常文档流，并相对于最近的已定位祖先元素（即 position 为 relative、absolute 或 fixed 的祖先）进行定位。
.child {
position: absolute;
top: 20px;
left: 30px;
background-color: #007acc;
color: white;
padding: 10px;
}
此时，.child 会从 .parent 的左上角开始，向右偏移30px，向下偏移20px。
立即学习“前端免费学习笔记（深入）”；
常见应用场景
- 模态框或提示框定位：将弹出层相对于触发按钮或容器精确定位。
- 图标或标签叠加：如在图片右上角添加“推荐”角标。
- 下拉菜单：下拉内容相对于导航项定位。
- 居中布局：结合 top、left 和 transform 实现垂直水平居中。
注意事项
- 如果父元素没有设置 relative（或其他定位），absolute 子元素会逐层向上查找，直到 body 或视口。
- absolute 元素脱离文档流，不占据空间，可能覆盖其他内容，注意 z-index 控制层级。
- relative 父元素建议有明确尺寸或内容撑起，避免高度塌陷影响布局。
基本上就这些。掌握好 relative + absolute 的配合，能让你更灵活地实现复杂布局效果。关键在于理解“已定位祖先元素”这一概念。不复杂但容易忽略。
