如何在保留overflow:hidden默认样式的前提下实现sticky定位？

position: sticky 正常生效的前提是，它的最近滚动祖先元素的 overflow 属性是 visible。你给所有div设了默认 overflow:hidden，导致包含sticky元素的父div变成了滚动容器，sticky的粘性范围被限制在这个容器内部，自然无法实现预期的视窗粘性效果。

以下几种方法都不用改动全局div的默认样式：

方法1：用非div标签包裹sticky元素 #

因为你的默认样式只针对div，换用<aside>、<section>这类非div标签来包裹sticky的div，这个外层容器不会继承overflow:hidden，就能让sticky正常工作：

<div class="container" style="overflow: hidden;">
  <!-- 其他内容 -->

  <aside>
    <div class="toc" style="position: sticky; top: 0;">
      <!-- 粘性内容 -->
    </div>
  </aside>

  <!-- 其他内容 -->
</div>

方法2：给额外加的父div显式设overflow:visible #

如果一定要用div，就额外套一层div，给这个div单独加内联样式overflow: visible（内联样式优先级高于全局默认样式），这样不影响其他div的默认设置：

<div class="container" style="overflow: hidden;">
  <!-- 其他内容 -->

  <div style="overflow: visible;">
    <div class="toc" style="position: sticky; top: 0;">
      <!-- 粘性内容 -->
    </div>
  </div>

  <!-- 其他内容 -->
</div>

方法3：用CSS选择器优先级覆盖 #

通过更具体的CSS选择器，给sticky元素的直接父div单独设置overflow:visible，优先级高于全局的div默认样式：

/* 保持其他div的overflow:hidden */
.container > div:not(.toc) {
  overflow: hidden;
}
/* 给sticky的父div（这里.toc本身是直接子元素）设overflow:visible */
.container > .toc {
  overflow: visible;
}

对应的HTML结构：

<div class="container">
  <!-- 其他内容 -->

  <div class="toc" style="position: sticky; top: 0;">
    <!-- 粘性内容 -->
  </div>

  <!-- 其他内容 -->
</div>

⚠️ 注意：sticky元素必须设置top/bottom/left/right中的至少一个属性，否则完全不会生效，这是很容易漏掉的细节。

内容的提问来源于stack exchange，提问作者Mons