css中sticky属性是什么

sticky定位结合relative与fixed特性，设置如top值后元素在滚动至临界点时固定于视口，常用于表头、导航栏等场景，需注意必须指定偏移量且父容器足够高，否则无效。

sticky 属性是 CSS 中 position 属性的一个值，用于创建“粘性定位”元素。它结合了 relative 和 fixed 定位的特点，让元素在滚动到特定位置前正常流动，到达设定临界点后像 fixed 一样固定在视窗中。

工作原理

一个设置了 position: sticky; 的元素，会根据用户的滚动行为动态切换表现：

• 在未到达设定的偏移位置（如 top: 10px）时，元素表现为相对定位（relative），保留在正常文档流中的位置
• 当滚动到该偏移位置与视口边界对齐时，元素变成固定定位（fixed），停留在指定位置不再随页面滚动而消失
• 当父容器或上下文不再覆盖该区域时，元素恢复为正常流中位置

使用条件和注意事项

sticky 并非在所有情况下都生效，需满足几个关键条件：

• 必须设置一个明确的偏移阈值，例如 top、bottom、left 或 right，否则 sticky 不起作用
• 元素必须位于一个有足够滚动范围的父容器中，且父元素高度要大于 sticky 元素自身高度
• sticky 元素不会脱离文档流，因此不会影响其他元素布局
• 在某些旧浏览器（如 IE）中不被支持，需注意兼容性

常见应用场景

sticky 定位非常适合需要局部固定的 UI 组件：

• 表格的表头在滚动时始终可见
• 侧边栏导航在滚动过程中暂时固定
• 标签页或选项卡在内容区滚动时保持置顶

基本上就这些。用得恰当的话，sticky 能提升用户体验，实现简洁高效的交互效果，不复杂但容易忽略细节。比如只写 position: sticky 而忘记加 top 值，就会发现它“没反应”。