静态定位为默认方式，元素按文档流排列且不支持偏移；2. 相对定位使元素相对原位置偏移但仍占位，可作为绝对定位的参考父容器；3. 绝对定位让元素脱离文档流并相对于最近已定位祖先定位，常用于弹窗或覆盖层；4. 固定定位使元素相对于视口固定，适合导航栏等不随滚动移动的组件；5. 粘性定位在滚动到阈值后由相对变为固定，常用于表头吸附。合理使用可提升布局灵活性与交互体验，关键在于理解参照对象与文档流影响，并结合z-index控制层级。
在网页开发中，position 属性是实现元素精确定位的核心工具。通过设置不同的定位方式，可以灵活控制元素在页面中的位置，满足复杂布局需求。下面介绍几种常见的 position 取值及其使用技巧。
1. 静态定位（position: static）
这是元素的默认定位方式。元素按照文档流正常排列，不支持 top、bottom、left、right 偏移属性。
说明：一般不需要显式设置，适用于不需要特殊定位的普通元素。2. 相对定位（position: relative）
元素相对于其在文档流中的原始位置进行偏移，但原来的空间仍被保留。
- 可用于微调元素位置而不影响其他布局
- 常作为绝对定位元素的“参考父容器”
position: relative 的父元素，能让其内部的绝对定位元素以此为定位基准。
3. 绝对定位（position: absolute）
元素脱离文档流，相对于最近的已定位（非 static）祖先元素进行定位；若无，则相对初始包含块（通常是视口）。
立即学习“前端免费学习笔记（深入）”；
- 常用于弹窗、提示框、图标覆盖等场景
- 元素不再占据原始空间，可能覆盖其他内容
top: 0; left: 0; 可将元素定位到父容器左上角，适合做遮罩或装饰图层。
4. 固定定位（position: fixed）
元素相对于浏览器视口定位，不随页面滚动而移动。
- 适合导航栏、返回顶部按钮、悬浮客服等固定功能组件
- 定位基准始终是视口，不受父元素影响
env() 函数优化显示。
5. 粘性定位（position: sticky）
介于相对定位和固定定位之间，元素在滚动到特定阈值前表现为相对定位，之后变为固定定位。
- 典型应用：表格表头随页面滚动自动“吸附”在顶部
- 必须指定
top或bottom才能生效
top: 0 是最常见的用法，让元素到达顶部时“粘住”不动。
基本上就这些。合理使用 position 属性，能大幅提升页面布局的灵活性和交互体验。关键是理解每种定位的参照对象和是否脱离文档流。实际开发中，结合 z-index 控制层级，效果更佳。不复杂但容易忽略细节。
