相对定位元素不脱离文档流，通过top、left等属性相对于原位置偏移；绝对定位脱离文档流，相对于最近的已定位祖先定位；固定定位相对于视口固定，不随滚动移动；粘性定位在滚动到阈值后由相对变为固定。
在CSS布局中，position 属性是控制元素定位方式的核心工具。通过设置不同的值，可以精确控制元素在页面中的位置。常见的 position 取值包括 static、relative、absolute、fixed 和 sticky。下面逐一解析它们的使用方法和特点。
relative 相对定位
元素设置为 position: relative; 时，它仍然占据原来在文档流中的位置，但可以通过 top、right、bottom、left 属性进行偏移。
示例：div {
position: relative;
top: 10px;
left: 20px;
}
该 div 向右移动 20px，向下移动 10px，但原位置仍被保留。
absolute 绝对定位
设置 position: absolute; 的元素会脱离文档流，不再占据空间，其定位参考点是最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先），若无则以初始包含块（通常是视口）为参考。
立即学习“前端免费学习笔记（深入）”；
- 完全脱离文档流，不影响其他元素布局
- 定位基于最近的已定位祖先元素的边界
- 常用于弹窗、下拉菜单、图层覆盖等场景
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
child 元素将相对于 parent 定位到右上角。
fixed 固定定位
position: fixed; 使元素相对于浏览器视口进行定位，即使页面滚动，元素位置也保持不变。
- 脱离文档流，不随页面滚动而移动
- 常用于导航栏、返回顶部按钮、侧边广告等需要固定显示的组件
- 定位参考点是视口，不是父元素
.navbar {
position: fixed;
top: 0;
width: 100%;
}
导航栏始终固定在页面顶部。
sticky 粘性定位
position: sticky; 是相对定位与固定定位的结合体。元素在滚动到特定阈值前表现为 relative，之后表现为 fixed。
- 必须指定 top、bottom、left 或 right 才能生效
- 常见于表格表头、侧边栏跟随滚动等场景
- 依赖父容器的高度和滚动行为
table th {
position: sticky;
top: 0;
background: white;
}
当表格滚动到表头即将离开视口时，表头会“粘”在顶部不动。
基本上就这些。掌握每种定位的特点和适用场景，能帮助你更灵活地构建复杂布局。注意层级关系（z-index）、文档流影响以及父级是否“已定位”，这些细节往往决定定位是否生效。不复杂但容易忽略。
