面试题：说说你对 sticky 定位的理解

position: sticky 是 CSS 中一种非常实用的定位方式，结合了 relative 和 fixed 定位的特点。

它允许元素在滚动到特定阈值之前表现得像相对定位（relative），一旦达到该阈值，则表现得像固定定位（fixed），停留在视口中指定的位置。

基本语法

.sticky-element {
    position: sticky;
    top: 10px; /* 或者 bottom, left, right */
}

工作原理

• 初始状态：元素表现为 position: relative，即它在正常文档流中的位置。
• 触发条件：当用户滚动页面，使得元素的 top（或 bottom, left, right）边界到达其最近的块级祖先容器的对应边界时，元素会“粘”在那个位置。
• 停止条件：当包含该元素的父容器即将滚出视口时，元素会随着父容器一起滚动，不再保持固定。

关键特性

1. 必须设置偏移量：sticky 定位必须配合 top, bottom, left, 或 right 使用，否则不会生效。
2. 父容器限制：如果父容器设置了 overflow: hidden, overflow: auto 或 transform 等属性，可能会阻止 sticky 生效。
3. 层级关系：sticky 元素的层叠上下文与普通元素相同，可以通过 z-index 调整层级。

常见应用场景

• 导航栏随页面滚动而固定在顶部。
• 表格的表头在滚动时保持可见。
• 侧边栏在滚动过程中固定位置。

兼容性

现代浏览器普遍支持 position: sticky，但在一些旧版本浏览器中可能需要使用 JavaScript 模拟实现。

总之，sticky 定位提供了一种简单而强大的方式来创建“吸顶”或“吸附”效果，极大地提升了用户体验。