面试题：CSS 的 position 有哪些属性值，区别是什么？

position 是 CSS 中控制元素定位的核心属性，它决定了元素如何在页面中放置。共有 5 个标准属性值，每个都有独特的定位行为。

行为：
- 元素按照正常的文档流（Normal Document Flow）进行布局。
- top, right, bottom, left, z-index 等偏移和层叠属性完全无效。
- 元素在文档中占据其应有的空间。
特点：
- 这是所有元素的默认定位方式。
- 不脱离文档流。
使用场景：绝大多数普通内容元素。

.element {
    position: static; /* 通常不需要显式声明 */
}

行为：
- 元素仍在正常的文档流中，占据原有空间。
- 可以通过 top, right, bottom, left 属性相对于其自身原本的位置进行偏移。
- 偏移后，元素原来的位置仍然被占据，不会影响其他元素的布局（可能会造成重叠）。
特点：
- 不脱离文档流。
- 是 absolute 定位的参照物（如果祖先元素是 relative，absolute 元素会相对于它定位）。
使用场景：
- 微调元素位置。
- 为 absolute 子元素创建定位上下文。

.relative {
    position: relative;
    top: 10px; /* 向下移动 10px */
    left: 20px; /* 向右移动 20px */
}

行为：
- 元素完全脱离文档流，不占据任何空间。
- 通过 top, right, bottom, left 相对于最近的已定位祖先元素（即 position 为 relative, absolute, fixed, sticky 的祖先）进行定位。
- 如果没有这样的祖先，则相对于初始包含块（通常是 <html> 元素或视口）。
特点：
- 脱离文档流。
- 后续元素会“上移”填补其位置。
- 会创建新的层叠上下文（配合 z-index）。
使用场景：
- 模态框（Modal）、下拉菜单、工具提示（Tooltip）。
- 精确定位的装饰元素。

.absolute {
    position: absolute;
    top: 50px;
    left: 50px; /* 相对于最近的已定位祖先 */
}

行为：
- 元素完全脱离文档流，不占据任何空间。
- 通过 top, right, bottom, left 相对于浏览器视口 (Viewport) 进行定位。
- 元素固定在屏幕的某个位置，不随页面滚动而移动。
特点：
- 脱离文档流。
- 定位参照物是视口，不受任何祖先元素影响（现代浏览器中即使祖先有 transform 也如此）。
使用场景：
- 固定导航栏（Sticky Header）。
- 返回顶部按钮。
- 固定侧边栏或广告。

.fixed {
    position: fixed;
    top: 0;
    right: 0; /* 固定在视口右上角 */
}

行为：
- 表现为 relative 和 fixed 的结合体。
- 在元素位于其父容器内时，表现为 relative（随页面滚动）。
- 当滚动到特定阈值（由 top, bottom 等指定）时，表现为 fixed，“粘”在视口的指定位置。
- 当父容器即将滚出视口时，元素会停止“粘住”，随父容器一起滚动。
特点：
- 必须设置 top, bottom, left, 或 right 才能生效。
- 父容器不能有 overflow: hidden 或 overflow: auto（可能阻止生效）。
- 不脱离文档流（在“粘住”前）。
使用场景：
- 表格表头随滚动而固定。
- 导航选项卡“吸顶”效果。

.sticky {
    position: sticky;
    top: 0; /* 滚动到距顶部 0px 时开始“粘住” */
}

属性值	脱离文档流	定位参照物	是否随滚动移动	常见用途
`static`	❌	–	是	默认布局
`relative`	❌	自身原位置	是	微调、创建定位上下文
`absolute`	✅	最近的已定位祖先	是	弹窗、下拉菜单
`fixed`	✅	浏览器视口	❌	固定导航、返回按钮
`sticky`	❌ (部分)	视口 (触发后)	部分	吸顶标题、表头

掌握这 5 个值的区别，是精通 CSS 布局的基础。

THE END