如何修复 CSS Position Sticky 不起作用的问题

本文最初发布于https://robertmarshall.dev/blog/solution-to-why-css-position-sticky-is-not-working/（更新后）

这个问题的解决时间远远超过了应有的时间。

我在标题上使用了CSS position: sticky，所以它会随着用户滚动而向下移动。然而，当我添加从右侧过渡的移动菜单时，粘性标题就坏了。不明白为什么！

事实证明，sticky大多数价值观都不能很好地发挥作用overflow。

如果您尝试使用position: sticky但它不起作用，那是因为包装它的元素之一使用了overflow值为hidden或auto。scroll

粘连问题如何解决？

有一个新的值可以与 一起使用overflow。它是clip。

正如 Mozilla 在其文档中所述：

与 hidden 类似，内容会被裁剪到元素的 padding box 内。clip 和 hidden 的区别在于，clip 关键字还会禁止所有滚动，包括程序化滚动。该框不是滚动容器，也不会启动新的格式化上下文。如果您希望启动新的格式化上下文，可以使用 display: flow-root 来实现。

所有现代浏览器都支持剪辑吗？

截至撰写本文时（2022年11月23日），所有当前版本的现代浏览器均支持此功能。如果您想自行检查，请查看“我可以使用吗” 。