CSS 如何实现粘性定位效果？

Question

CSS 如何实现粘性定位效果？

仓乃文 · Accepted Answer

粘性定位 position: sticky 让元素在滚动到指定位置时固定不动，结合了 relative 和 fixed 的特性，常用于吸顶导航和侧边栏。

```css
.sticky-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100;
  padding: 10px 0;
}
```

表格首列冻结：
```css
.table-wrapper {
  overflow-x: auto;
}

.table-wrapper td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}
```

侧边栏粘性定位：
```css
.sidebar {
  position: sticky;
  top: 80px;
  align-self: flex-start;
}
```

补充说明：
- sticky 元素在父容器内生效，父容器 overflow 不能是 hidden
- 必须指定 top/left/right/bottom 中至少一个值
- 父容器高度必须大于 sticky 元素高度，否则不会触发
- 适合导航栏吸顶、表格首列冻结、侧边栏跟随等场景