CSS中的position: sticky属性详解

描述
position: sticky 是一种混合定位模式，元素在滚动时表现为相对定位（relative）和固定定位（fixed）的结合。当元素在视口内滚动到特定阈值（通过top、right、bottom、left设定）时，它会从常规文档流中"粘住"视口边缘，直到其父容器离开视口。它常用于实现导航栏或目录的吸顶效果。

解题过程

1. 基本定义与阈值设定

   • 设置 position: sticky 后，必须指定至少一个阈值（如 top: 0）。
   • 示例：若元素设置 top: 10px，当滚动使元素顶部与视口顶部的距离 ≤10px 时，触发粘性效果。

2. 粘性行为的触发条件

   • 父容器限制：粘性元素会一直保持粘性状态，直到其父容器的边界触碰到粘性方向的相反边缘（例如，若设置 top: 0，则父容器底部到达视口顶部时粘性失效）。
   • 滚动方向：仅在与阈值方向一致的滚动中生效（如 top 对应垂直向下滚动）。

3. 层级与堆叠控制

   • 粘性元素会创建新的层叠上下文，类似 position: relative。
   • 若多个粘性元素重叠，可通过 z-index 控制显示优先级。

4. 常见问题与注意事项

   • 父容器溢出隐藏：若父容器设置 overflow: hidden，粘性效果会失效。
   • 表格元素适配：在 <th> 或 <tr> 上使用时，需指定 position: sticky 于单元格而非行。
   • 浏览器兼容性：需检查旧版浏览器支持（如 Safari 需 -webkit-sticky 前缀）。

示例代码

.sticky-header {
  position: sticky;
  top: 0;        /* 触发粘性的阈值 */
  background: #fff;
  z-index: 100;  /* 确保悬浮时覆盖其他内容 */
}

此代码使元素在向下滚动时始终固定在视口顶部，适合导航栏吸顶效果。