关键在于“父设relative、子用absolute”：relative为子元素提供定位上下文且不脱离文档流，absolute则脱离文档流并以最近已定位祖先为参照，二者配合实现精确定位与居中等效果。
要让 HTML 元素按需精确定位，关键在于理解 position 属性中 relative 和 absolute 的配合逻辑——不是单独用，而是“父设 relative，子用 absolute”才真正可控。
relative 是为 absolute 搭建参照系
相对定位本身不改变布局结构，只让元素在原位置上“挪一挪”，同时保留原始占位空间。它的核心价值不是自己动，而是给子元素提供一个可靠的定位上下文。
- 父容器必须显式声明
position: relative（哪怕不写 top/left），否则子元素的 absolute 会一路往上找，直到<body> - 它不脱离文档流，所以不会影响其他兄弟元素的排列
- 常用于按钮微调、图标贴边、或作为弹窗/下拉菜单的包裹容器
absolute 依赖最近的已定位父级
绝对定位会让元素完全脱离文档流，不再占据空间，后续元素自动填补空位。它的偏移基准不是页面边缘，而是最近那个 position 值不为 static 的祖先元素。
- 如果父级没设 relative/absolute/fixed，它就以
<body>为参照，容易跑偏 - 用
top、right、bottom、left控制距离参照边界的距离 - 适合做悬浮按钮、气泡提示、轮播指示器、模态框等需要脱离常规布局的组件
典型组合：居中一个固定尺寸的弹窗
这是最常用也最能体现两者协作的场景。父容器设 relative 只是“划个圈”，子元素用 absolute + transform 实现精准居中：
立即学习“前端免费学习笔记（深入）”；
- 父级加
position: relative（可选宽高、边框等视觉约束） - 子级设
position: absolute; top: 50%; left: 50%，此时左上角落在中心点 - 再加
transform: translate(-50%, -50%)把自身回退一半宽高，完成真正居中
常见误区与避坑提醒
很多布局错乱，其实源于对定位链路的误判：
- 没给父级设 relative，却指望子元素相对于它定位——结果定位到 body 上去了
- 给多个同级 absolute 元素设相同 top/left，它们会重叠，需配合
z-index控制层叠顺序 - relative 的百分比偏移（如
left: 20%）是按其包含块宽度算的，缩放时会动；absolute 的百分比则按参照父级尺寸计算，更稳定
