核心结论，相对定位是 position relative，元素还是保留原来文档流位置，偏移是相对于自己原本所在位置移动，占位空间不会消失。绝对定位是 position absolute，元素脱离正常文档流，定位参考点是最近的已经定位的父元素，也就是父元素设置了 relative、absolute、fixed、sticky，如果所有父级都没有定位，就会以 html 根元素也就是初始包含块作为参考。开发里面最经典组合就是父级写 relative，子元素写 absolute，把子元素精准固定在父盒子内部任意位置，这个组合也常叫做父相子绝。
相对定位 position relative
核心特点
1 元素原本占据的文档流位置继续保留，移动之后原来的空位不会被其他元素补上
2 偏移参考基准是元素自身原来的位置
3 通过 top bottom left right 四个属性控制偏移方向和距离
4 元素依然在普通文档流里面，只是视觉上发生位移
示例代码
.box1 {
position: relative;
top: 20px;
left: 30px;
width: 200px;
height: 100px;
background: eee;
}
代码说明，这个盒子原本位置不动，只是向下偏移 20px，向右偏移 30px，后面的兄弟元素不会往前填补这个盒子原来留下的空间。
常见用途
第一种，单纯给元素做微调偏移
第二种，最重要用途，作为子元素绝对定位的定位父容器，也就是父相子绝方案
绝对定位 position absolute
核心特点
1 元素脱离正常文档流，原来占据的位置消失，后面的元素会向上填补这个空位
2 定位参考对象，优先查找最近的设置了定位的祖先元素
3 如果祖先全部没有设置定位，参考基准就是 html 根元素
4 同样使用 top bottom left right 控制位置
5 脱离文档流之后，元素不再参与普通流排版，会覆盖其他普通流元素，可以通过 z-index 控制层级
示例代码 父相子绝经典写法
.parent {
position: relative;
width: 400px;
height: 300px;
border: 1px solid ccc;
}
.child {
position: absolute;
top: 10px;
right: 10px;
width: 80px;
height: 40px;
background: f00;
}
代码说明，父盒子 relative，子盒子 absolute，子元素就会相对于这个父盒子，距离顶部 10px，距离右侧 10px 摆放。
常见用途
角标、弹窗、悬浮按钮、图片上的文字标签、下拉菜单这类需要精准固定在容器内部的组件
两种定位对比表格
| 对比项 | 相对定位 relative | 绝对定位 absolute |
|---|---|---|
| 是否脱离文档流 | 不脱离，保留原占位 | 脱离，原位置消失 |
| 定位参考基准 | 元素自己原本的位置 | 最近已定位祖先元素，没有就参考 html |
| 原占位是否保留 | 保留 | 不保留 |
| 典型场景 | 元素微调，充当定位父容器 | 子元素精准定位，角标悬浮层 |
| 对后续兄弟元素影响 | 后续元素位置不变 | 后续元素上移补位 |
重要坑点说明
1 绝对定位元素如果同时写 top 和 bottom，并且没有设置高度，部分浏览器会拉伸高度，一般推荐只写 top 或者只写 bottom，避免高度异常
2 父元素只设置 relative，但是没有写偏移 top left，视觉上父元素位置不变，只是提供定位参照，这个是父相子绝的标准用法
3 绝对定位元素默认宽度是内容宽度，如果想要横向撑满父容器，可以写 left 0 right 0
4 z-index 只对定位元素生效，普通 static 元素 z-index 无效，relative 和 absolute 都可以设置 z-index 调整叠放顺序
5 如果祖先元素设置 overflow hidden，绝对定位子元素有可能被裁剪，这个是开发高频 bug
问题 1 css 中的绝对定位和相对定位，为什么 absolute 跑到页面最外层了
回答 1 css 中的绝对定位和相对定位，absolute 找不到带定位的父元素，就会参考 html 根元素定位，解决办法就是给父盒子加上 position relative，也就是父相子绝，css 中的绝对定位和相对定位这个组合就可以让 absolute 回到父容器内部。
问题 2 css 中的绝对定位和相对定位，relative 移动之后原来的空位为什么还在
回答 2 css 中的绝对定位和相对定位，relative 没有脱离文档流，所以原来占位继续保留，这是 css 中的绝对定位和相对定位里面 relative 本身特性，和 absolute 脱离文档流原位置消失不一样。
问题 3 css 中的绝对定位和相对定位，relative 可以用来做角标吗
回答 3 css 中的绝对定位和相对定位，relative 一般不直接做角标，角标是子元素使用 absolute，父容器设置 relative，是 css 中的绝对定位和相对定位搭配使用。
问题 4 css 中的绝对定位和相对定位，absolute 元素宽度为什么不是自动撑满
回答 4 css 中的绝对定位和相对定位，absolute 脱离文档流之后默认宽度是内容自适应，如果需要横向撑满，css 中的绝对定位和相对定位里面 absolute 需要手动设置 left 0 right 0。
本文仅介绍 css 标准中 position 相对定位和绝对定位基础原理与写法，不同浏览器渲染细节存在差异，实际项目需要做兼容性测试，css 规范后续更新相关行为可能调整，代码仅作为技术参考。