static为默认定位，元素按文档流排列，偏移属性无效；2. relative相对原始位置偏移，保留占位，不脱离文档流；3. absolute脱离文档流，相对于最近的已定位祖先元素定位，常用于弹窗或菜单；4. fixed固定于视口，滚动不变，适用于导航栏等；5. sticky结合relative与fixed特性，滚动到阈值后吸顶，需指定偏移量。掌握各定位特性及上下文关系，可精准控制布局。
在网页布局中，position 属性是控制元素定位的核心工具。通过设置不同的 position 值，可以精确控制元素在页面中的位置。以下是常见的 position 取值及其用法，帮助你灵活实现元素定位。
1. static 定位（默认）
元素按照正常的文档流排列，top、bottom、left、right 属性无效。
大多数元素默认为 static，不需要特别设置。它不参与任何特殊定位行为。2. relative 定位（相对定位）
元素相对于它在正常文档流中的原始位置进行偏移，不会脱离文档流。
- 使用 top、right、bottom、left 调整位置
- 原占位空间保留，不影响其他元素布局
- 常用于微调元素位置或作为绝对定位的参考父容器
3. absolute 定位（绝对定位）
元素脱离文档流，相对于最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先）进行定位。若无则相对于初始包含块（通常是视口）。
立即学习“前端免费学习笔记（深入）”；
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
- 不占据原文档空间，可能覆盖其他元素
- 适合做弹窗、下拉菜单、图标定位等场景
- 父元素通常设为 position: relative 来建立定位上下文
4. fixed 定位（固定定位）
元素脱离文档流，相对于浏览器视口定位，滚动页面时元素位置不变。
- 常用于导航栏、返回顶部按钮、悬浮广告
- 不受页面滚动影响
- 定位基准是视口，不是父元素
5. sticky 定位（粘性定位）
结合了 relative 和 fixed 的特性，元素在滚动到特定阈值前表现为相对定位，之后变为固定定位。
- 必须指定 top、bottom、left 或 right 才能生效
- 常用于表格表头、侧边栏跟随滚动
- 依赖父容器有足够的高度以触发粘性行为
基本上就这些。掌握每种 position 的行为特点，再结合 top、left 等偏移属性，就能实现大多数定位需求。关键是理解定位上下文和文档流的影响。不复杂但容易忽略细节。
