position: sticky 实际上是如何工作的，为什么有时它会失效？

Question

IT Interview Practice · Accepted Answer

`position: sticky` 是一个混合体：元素的行为像 `relative`（保持在正常流中）**直到**它滚动到你指定的阈值，然后表现得像 `fixed`（固定在位置）——但仅当其**containing block**仍然在屏幕上时。

```css
.section-header {
  position: sticky;
  top: 0;        /* sticks when its top edge reaches the viewport top */
}
```

`top`（或 `bottom`/`left`/`right`）值是**必需的** ——它定义阈值。没有它，sticky 什么都不做。

## 作用域：它只在其父容器内粘住

sticky 元素被限制在其**父容器**内。它在滚动*穿过*该父容器时粘住，然后一旦父容器的底部经过就滚动开。这就是"粘性分组标题"工作的方式——每个标题只在其所属分组可见时粘住。

## 为什么它通常"不起作用" ——失效情况

**1. 某个祖先元素设置了 `overflow: hidden/auto/scroll`。** 这是第一大原因。Sticky 定位会被任何可滚动的祖先破坏，因为元素相对于*那个*滚动容器粘住，而不是相对于页面：

```css
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
```

**2. 父容器高度不够。** Sticky 只有在父容器高于 sticky 元素时才有粘住的空间——如果父容器和 sticky 元素一样高，就没有可滚动的空间，所以它永远不会看起来粘住。

**3. 没有设置阈值。** 忘记 `top`/`bottom` 意味着没有粘住点。

**4. 父容器上的高度限制**（例如伸展项目的 flex 父容器）也会移除滚动空间。

## 调试检查清单

```text
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
```

## 为什么这很重要

`position: sticky` 为粘性标题、表格标题、侧边栏和"scrollspy" UI 提供支持，无需 JavaScript。

但其怪癖——特别是任何祖先上的 `overflow` 都会静默破坏它——使其成为频繁出现"为什么这不粘住？"调试的来源。

了解 containing-block 作用域和 overflow 陷阱是让你可靠地使用它的关键。

作用域：它只在其父容器内粘住

为什么它通常"不起作用" ——失效情况

调试检查清单

为什么这很重要

相关问题