CSS position: sticky 不起作用

在本文中，我们将介绍 CSS 中的 position: sticky 属性不起作用的原因和解决方法。

阅读更多：CSS 教程

什么是 position: sticky

CSS 的 position: sticky 属性可以让元素在滚动时固定在指定位置。当被定位的元素在可视区域内，表现为普通定位（根据 normal flow 决定），当被定位的元素即将滚动到不可见状态时，表现为固定定位，会固定在容器中的指定位置。

position: sticky 不起作用的原因

position: sticky 可能不起作用的原因有多个，下面我们会逐一进行介绍。

缺少父容器的高度

当我们想要使用 position: sticky 属性时，我们必须保证父容器有足够的高度。如果父容器的高度不够，那么元素就无法固定在指定位置，而是会随着滚动一起移动。解决这个问题的方法是给父容器设置一个固定高度或者是设置 min-height 属性，以确保元素在可滚动区域内保持固定。

.parent-container {
  height: 500px;
  /* or */
  min-height: 500px;
}

元素未设置宽度

另一个导致 position: sticky 属性失效的原因是元素未设置宽度。当元素未设置宽度时，它会继承父容器的宽度，这会导致元素宽度随着滚动区域的改变而改变，进而导致固定定位失效。为了解决这个问题，我们可以给元素设置一个固定的宽度。

.sticky-element {
  width: 300px;
}

容器的子元素覆盖了 sticky 元素

如果父容器内的其他子元素（特别是位于 sticky 元素的上方）设置了较高的 z-index 值，那么它们就可能会覆盖住 sticky 元素。在这种情况下，我们可以给 sticky 元素设置较高的 z-index 值，以确保它位于其他元素之上。

.sticky-element {
  z-index: 999;
}

可滚动区域未正确设置

对于 position: sticky 属性，它只会在容器的可滚动区域内起作用。因此，如果我们想要应用 sticky 定位效果，容器必须设置 overflow 属性并且具有可滚动的高度。

.scrollable-container {
  overflow: auto;
  max-height: 600px;
}

浏览器不支持 sticky 定位

最后，position: sticky 属性在一些老旧的浏览器上可能不被支持。对于这种情况，我们可以使用一些 polyfill 或者其他替代方案，来实现类似的效果。

总结

在本文中，我们介绍了 CSS 中 position: sticky 属性不起作用的原因和解决方法。主要原因包括缺少父容器的高度、元素未设置宽度、容器的子元素覆盖了 sticky 元素、可滚动区域未正确设置以及浏览器不支持 sticky 定位。通过解决这些问题，我们可以成功实现 position: sticky 的固定定位效果。