答案：CSS中的sticky定位可实现元素滚动时固定效果，如粘性头部。设置position: sticky和top等偏移值，确保父容器无overflow限制，即可让导航栏、表头等在滚动中保持可见，提升用户体验。
在
网页设计
中，让导航栏或标题在页面滚动时保持可见，是一种提升用户体验的常见做法。CSS 中的
sticky 定位
正是实现这种“滚动粘性布局”的简单高效方式，尤其适用于创建 sticky header（粘性头部）。
什么是 Sticky 定位？
position: sticky;
是一种相对定位和固定定位的结合体。元素在正常文档流中表现为相对定位（relative），当用户滚动页面并达到设定的临界点时，它会变成固定定位（fixed），停留在指定位置直到父容器移出视口。
要使用 sticky 定位，必须为元素指定一个
top、bottom、left 或 right
偏移值，否则它不会生效。
如何实现 Sticky Header
下面是一个典型的粘性导航栏实现方法：
立即学习
“
前端免费学习笔记（深入）
”；
CSS 样式如下：
Refore网页转设计
一款加速产品 UI 设计迭代的工具，可以一键将任意网页和交互导入到 Pixso、MasterGo、即时设计、Figma，实现像素级还原。
下载
说明：
top: 0
表示当元素到达视口顶部时，开始“粘”在顶部。
background-color
避免内容从下方透出。
z-index
确保粘性元素显示在其他内容之上。
父元素不能有
overflow: hidden、auto 或 scroll
，否则 sticky 会失效。
注意事项与兼容性
虽然 sticky 定位非常实用，但使用时需要注意以下几点：
确保父容器没有设置
overflow: hidden
或
overflow: scroll
，这会限制 sticky 的行为。
Sticky 元素必须有明确的
top
或
bottom
值才能激活粘性效果。
在较老版本
浏览器
（如 IE）中不支持，需考虑降级方案或使用 JavaScript 模拟。
移动端支持良好，iOS 和 Android 主流浏览器均可用。
实际应用场景
除了 header，sticky 定位还适用于：
侧边栏目录：滚动时保持章节导航可见。
表格表头：长表格中固定表头便于查看。
标签页切换栏：在内容区域滚动时保持选项卡可见。
基本上就这些。只要理解了 sticky 的触发机制和限制条件，就能轻松实现常见的粘性布局效果，无需复杂 JavaScript。关键是设置正确的
position: sticky
和偏移值，并注意父容器的 overflow 属性。不复杂但容易忽略细节。
网站标题
.sticky-header {
position: sticky;
top: 0;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}