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