Q9
★ ★ ★ ★ ★
说一下 position 定位的几种方式和区别？
⚡ 速记答案（30 秒）
static：默认，按正常文档流。relative：相对自身原位置偏移，仍占空间。absolute：相对最近非 static 祖先定位，脱离文档流。fixed：相对视口定位，脱离文档流。sticky：在一定范围内跟随滚动，达到阈值后粘住。
📖 详细讲解
标准面试回答（推荐记住）
position 有五个值。static 是默认值，按正常文档流排列。relative 是相对定位，相对于自身原始位置偏移，但仍然占据原来的文档流空间。absolute 是绝对定位，相对于最近的非 static 祖先元素定位，完全脱离文档流。fixed 是固定定位，相对于视口定位，脱离文档流，常用于吸顶导航或悬浮按钮。sticky 是粘性定位，在一定范围内跟随滚动，当滚动到指定阈值后像 fixed 一样粘住。
五种定位对比
| 值 | 参照物 | 文档流 | 常用场景 |
|---|---|---|---|
| static | 无 | 在流内 | 默认 |
| relative | 自身原位置 | 在流内 | 微调、作为定位父级 |
| absolute | 定位祖先 | 脱离 | 弹窗、下拉菜单 |
| fixed | 视口 | 脱离 | 吸顶导航、悬浮按钮 |
| sticky | 视口+容器 | 在流内 | 表头固定、侧边栏 |
✅ 面试要点
- •理解每种定位的参照物
- •知道哪些会脱离文档流
- •掌握 sticky 的使用条件
💻 代码示例
sticky 粘性定位
🎨 效果预览