前端小知识：彻底搞懂 CSS 的 `position: sticky`！

CSS 中的 position: sticky 是一个让人又爱又恨的定位属性。它可以让元素像粘贴一样在页面中固定某个位置（比如页面滚动时固定在顶部或者某个地方），但它的使用往往伴随着一些疑惑和困顿，比如：

为什么我用 position: sticky，却完全不起作用？
是不是必须给父元素设置滚动才能让它生效？
哪些情况下它会失败？

这篇文章带你彻底搞懂 sticky 的工作原理，并掌握它的使用技巧！我们会通俗易懂地讲解原理，再配一些「踩坑案例」，走出你的困惑区。✨

什么是 `position: sticky`？

先让我们通过一段简单代码看看 sticky 的魔力！

html 复制代码

<div style="overflow-y: scroll; height: 200px;">
  <div style="height: 800px;">
    <div style="position: sticky; top: 20px; background-color: #FFD700">
      我是粘性元素
    </div>
  </div>
</div>

这段代码让黄色区域的 div 在页面滚动到一定距离之后，就会粘贴在距离父容器顶部 20px 的位置。

看完这个效果，你可能觉得 sticky 非常神奇也非常简单，但别着急，往往很多同学写了类似代码，却发现压根不起作用。这是因为 sticky 的背后有自己的一套「游戏规则」，接下来我们就来揭开它的神秘面纱。

`sticky` 的核心工作原理

通俗解释一下：position: sticky 的行为类似于结合了 relative 和 fixed 的特性，它会在以下两种状态中切换：

**相对定位（Relative）：**当粘性元素的容器视口范围内没有"触发粘附"距离时，它的定位表现和 relative 类似。
**固定定位（Fixed）：**当容器滚动到一定位置（超过其触发点）时，sticky 元素会变为类似于 fixed 的效果，粘附在特定位置，直到离开可滚动的容器范围。

要让 sticky 生效，它需要满足以下几个关键条件。

1. 需要有一个滚动的容器

sticky 的核心工作逻辑依赖于"最近的滚动祖先" 。如果祖先元素中没有可滚动的那个家伙，sticky 就会失效。

所谓"滚动祖先"指的是，从当前元素开始向上查找，第一个满足以下条件的祖先元素：

CSS overflow 属性被设置为 auto、scroll、hidden 或 overlay；
这个祖先元素的内容必须足够溢出，触发滚动行为（即出现滚动条或者支持滚动）。

如果找不到滚动祖先，也没有任何溢出的父级或根元素，sticky 就无法生效。

举例：存在滚动祖先时，`sticky` 能正常工作

html 复制代码

<div style="overflow: auto; height: 300px;"> <!-- 滚动祖先 -->
  <div style="height: 600px;">
    <div style="position: sticky; top: 10px; background: yellow;">
      我是 sticky 元素
    </div>
  </div>
</div>

解释：

外层容器设置了 overflow: auto; height: 300px;，并且内部内容（600px）超过 300px，此时它成为最近的滚动祖先。
sticky 的行为将基于这个滚动祖先，与之共同滚动并在 top: 10px 停止粘附。

2. 必须有滚动的祖先，但不一定是父元素

一个常见的误解是 "父元素必须是滚动的容器"，但事实并非如此。sticky 的生效原理是逐个查找最近的滚动祖先 ，如果父元素没有设置 overflow 或无法滚动，sticky 会往上查找更远的祖先。

举例：父元素不能滚动时，祖先负责滚动

html 复制代码

<div style="overflow: auto; height: 300px;"> <!-- 最近的滚动祖先 -->
  <div style="overflow: hidden;"> <!-- 父元素，但不是滚动祖先 -->
    <div style="position: sticky; top: 10px; background: yellow;">
      我是 sticky 元素
    </div>
  </div>
</div>

解释：

外层容器是滚动祖先（有 overflow: auto 且内容溢出），即使中间的父元素设置了 overflow: hidden，也不影响粘附行为。
sticky 的粘附仍基于外层滚动祖先。

3. 当无法找到滚动祖先时，失效！

如果所有祖先的 overflow 都是默认的 visible（也就是默认不产生滚动），或者内容本身没有溢出的情况，sticky 会彻底失效，看起来不起作用。

举例：没有滚动祖先，`sticky` 失效

html 复制代码

<div style="height: 300px;"> <!-- 默认 overflow: visible -->
  <div style="height: 600px;">
    <div style="position: sticky; top: 10px; background: yellow;">
      我是 sticky 元素
    </div>
  </div>
</div>

解释：

外层容器没有设置 overflow，而默认的 overflow: visible 不算滚动容器。
因此，sticky 无法生效。

4. 元素不能超出最近滚动容器的范围

当 sticky 元素的祖先滚动容器滚到了它的边界之外时，sticky 也就会"失效"，表现为跟随其父块走出容器范围。

举例：滚出滚动范围后失效

html 复制代码

<div style="overflow: auto; height: 300px;"> <!-- 滚动祖先 -->
  <div style="height: 600px;">
    <div style="position: sticky; top: 10px; background: yellow;">
      我是 sticky 元素
    </div>
  </div>
</div>

解释：

当到黄色区域滚动出滚动祖先之外后，它也会"退出"粘附状态，不会继续停留在屏幕中。它只在滚动祖先的范围内粘附。

总结：Sticky 生效要记住这些点

牢记以下基本原则，使用 sticky 不怕踩坑：

粘附行为需要滚动祖先：
- 配置一个滚动祖先（设置 overflow: auto 或 scroll），并确保内容能溢出。
最近的滚动祖先生效：
- 不要求父元素是滚动祖先，但会查找最近的符合条件的祖先。
超出滚动容器范围失效：
- sticky 元素只能在最近滚动祖先的可视区域内固定。
没有滚动祖先时完全失效：
- 如果页面所有祖先都没有滚动机制，sticky 没有任何作用。

小结

position: sticky 是一个神奇而实用的 CSS 属性，但只有理解了它的核心机制和规则，我们才能正确使用它。希望这篇文章能让你对 sticky 的神秘感彻底扫除，接下来就去尝试吧！🚀

如果文章对你有帮助，记得点个赞或者分享给更多人，感谢支持 ❤️！

FAQ

Q: 为什么 CSS 把 overflow: hidden 当作滚动祖先？

A: 这是一个非常有趣的问题！乍一看 overflow: hidden 是"隐藏溢出区域"，似乎并不会产生滚动行为，但实际上它仍然会影响 CSS 查找"滚动祖先"的机制。让我详细解释为什么如此，并提出它的真实作用。

`overflow: hidden` 在"滚动祖先"判定中的特殊角色

在 CSS 中，overflow 属性的作用是指定当内容溢出元素的边界时该如何处理，常见的值包括 visible（默认值）、scroll、auto、hidden。

但在查找最近的"滚动祖先"时，CSS 并不区分 hidden 和 auto 或 scroll 的行为 ------ 只要 overflow 的值不是 visible，就会被认为是一个潜在的"滚动容器" 。所以，符合以下条件时，即使它是 hidden，也会被视为滚动祖先：

overflow: hidden 明确告诉浏览器内容不允许溢出。
该元素的子元素可能在其边界内限制布局。

这也是为什么在判断"滚动祖先"时，CSS 把 overflow: hidden 看作是一个有滚动能力的候选对象，而不是直接忽略它。

`overflow: hidden` 真正的作用

overflow: hidden 的主要用途是隐藏溢出内容，但它本身并不会自动启用滚动。

隐藏溢出内容
- 当容器中的内容超出容器的尺寸时，hidden 表示溢出的内容将不可见。
- 通常用于限制子元素在父容器内的可视范围。
不会显示滚动条
- 与 overflow: scroll 或 overflow: auto 不同，hidden 不会在内容超出容器时显示滚动条，也不会允许用户通过滑动查看溢出的内容。

即使 overflow: hidden 被视为"滚动祖先"，真正的可滚动特性（滚动条、滚动事件等）并不会发生。

示例：`overflow: hidden` 和滚动祖先的判定

我们来看下面的代码，观察 hidden 是如何影响 sticky 行为的：

示例 HTML：

html 复制代码

<div style="overflow: hidden; height: 300px;"> <!-- 父级元素 overflow: hidden -->
  <div style="height: 600px;">
    <div style="position: sticky; top: 20px; background: yellow;">
      I am sticky
    </div>
  </div>
</div>

分析：

父容器设置了 overflow: hidden，因此，它不会显示溢出的子内容，同时这意味着任何超出容器的子元素会被直接裁剪。
sticky 会将此父容器视为滚动祖先，因为 CSS 中将 hidden 判定为一种限制溢出的潜在滚动行为。
但由于父容器并没有实际的滚动机制（没有滚动条，无法通过滚动看到被裁剪的内容），导致 sticky 虽然被"激活"，但在视觉上看不到它的粘附效果。

为什么 CSS 把 `overflow: hidden` 当作滚动祖先？

这是因为定义"滚动祖先"的 CSS 规则中，只关注 overflow 是否为非 visible 的值，并不关注滚动条是否实际出现。原因如下：

"滚动祖先"强调的是内容限制规则，而非滚动条本身
- hidden、auto 和 scroll 的共同点是，它们都限制了子内容超出容器的显示范围。
- 对于浏览器来说，只要容器的 overflow 是非 visible，它就视为能限制滚动的条件，从而可以被用作"滚动祖先"。
滚动条是否存在不影响"粘附判断"：
- 即使没有滚动条，position: sticky 的粘附行为依然会以最近的非 overflow: visible 容器为基准。

总结来说，CSS 定义逻辑聚焦在"是否存在限制（clipping）机制"，而不是是否实际能滚动。

回答你的重点问题：为什么 `hidden` 不能滚动？

虽然 overflow: hidden 被判定为滚动祖先，但它本质上并不会允许滚动，这是因为：

溢出内容直接隐藏：
- hidden 的定义明确表示：即使子元素的内容溢出，父级也不会展示超出部分。
- 没有滚动条出现（即，用户无法滚动）。
没有滚动能力（用户行为受限制）：
- hidden 排除了用户通过拖动或滚动查看超出内容的可能性。
行为与滚动分离：
- 它被认为是"能限制内容的容器"，而非"可交互的滚动区域"。

所以，overflow: hidden 虽然在逻辑上参与了"滚动祖先"的判定，但它并不是真的会"产生滚动"。

和其他 `overflow` 值的比较

为了更直观的对比，我们快速复习一下各种 overflow 值的处理逻辑与效果：

`overflow` 值	是否是"滚动祖先"？	会显示滚动条？	用户可滚动？	溢出内容会发生什么？
`visible`	❌（不是滚动祖先）	否	否	溢出内容可见，不限制
`hidden`	✅（滚动祖先）	否	否	溢出内容隐藏，被裁剪
`auto`	✅（滚动祖先）	是（视情况）	是	超出内容触发滚动行为
`scroll`	✅（滚动祖先）	是	是	永远显示滚动条

常见坑：使用 `hidden` 时的 `sticky` 失效问题

实际上我们常见的 sticky 行为失效，很多时候就是因为 hidden 的干扰。例如：

html 复制代码

<div style="overflow: hidden; height: 300px;"> <!-- 父级元素 -->
  <div style="position: sticky; top: 20px; background: yellow;">
    I am sticky
  </div>
</div>

在这个场景下：

父元素被 sticky 当成滚动祖先；
但是由于 hidden 不允许滚动，所以 sticky 做不到预期效果，看起来像是"失效"了。

避免这个问题的方法：拒绝使用 `hidden` 限制滚动：

如果需要实现滚动效果和 sticky，请改用 auto 或 scroll。
hidden 的场景更多用于裁剪内容，而非实现交互性的滚动。

总结

虽然 overflow: hidden 在 sticky 中可以被视为"滚动祖先"，但它的行为和真正的滚动容器有本质区别：

hidden 是一个裁剪溢出内容的机制，而非具备滚动能力；
CSS 中判定滚动祖先时，只要 overflow 的值不是 visible，就算符合条件，但不会实际带来滚动行为。

所以，如果你需要让 sticky 正常发挥作用，务必确保它的"滚动祖先"允许滚动（即 overflow: auto 或 overflow: scroll）。

前端小知识：彻底搞懂 CSS 的 `position: sticky`！