static为默认定位，按文档流排列，不受偏移属性影响；2. relative相对原始位置偏移，保留原空间，不脱离文档流；3. absolute脱离文档流，相对于最近已定位祖先元素定位，常用于弹窗和图层；4. fixed固定于视口，不随滚动移动，适合导航和返回顶部按钮；5. sticky结合relative与fixed特性，滚动到阈值后固定，需指定方向属性，多用于表头或侧边栏。掌握各定位是否脱离文档流及参考对象是关键。
在CSS中，position 属性用于控制元素在页面中的定位方式。不同的 position 值会改变元素的文档流行为和定位机制。以下是常用的 position 取值及其使用方法。
static（默认值）
元素按照正常的文档流进行排列，不受 top、bottom、left、right 属性的影响。
大多数元素默认就是 static 定位，不参与任何特殊定位行为。relative（相对定位）
元素相对于它在正常文档流中的原始位置进行偏移。设置 top、left 等属性会移动元素，但原来的位置仍被保留。
- 不会脱离文档流
- 常用于微调元素位置或作为绝对定位元素的参考父容器
- 示例：
absolute（绝对定位）
元素脱离文档流，相对于最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先）进行定位。如果没有这样的祖先，则相对于初始包含块（通常是视口）。
立即学习“前端免费学习笔记（深入）”；
- 完全脱离文档流，不占据空间
- 常用于弹窗、悬浮按钮、图层覆盖等场景
- 示例：
fixed（固定定位）
元素脱离文档流，相对于浏览器视口进行定位，不随页面滚动而移动。
- 适合做导航栏、回到顶部按钮等需要“固定”在屏幕某处的元素
- 示例：让一个 div 固定在右下角
sticky（粘性定位）
表现像 relative 和 fixed 的结合体。元素在滚动到特定阈值前表现为相对定位，之后变为固定定位。
- 必须指定 top、bottom、left 或 right 才能生效
- 常用于表格表头、侧边栏跟随等场景
- 示例：表头滚动到顶部时固定
基本上就这些。掌握每种定位方式的特点，就能灵活控制页面布局。关键是理解它们是否脱离文档流，以及相对谁定位。不复杂但容易忽略细节。
