HTML中的粘性定位（position: sticky）详解，包括常见场景、问题和解决方案

HTML/CSS 中的粘性定位详解（position: sticky）

粘性定位（Sticky Positioning） 是 CSS 中一种特殊的定位方式，元素在滚动到特定阈值前表现为相对定位（position: relative），到达阈值后变为固定定位（position: fixed）。它结合了 relative 和 fixed 的特性，常用于实现滚动时吸附效果。

一、基本用法

.element {
   
   
  position: sticky;
  top: 10px; /* 触发固定的阈值（支持 left/right/bottom） */
}

核心条件：

1. 必须指定阈值（如 top: 0），否则行为与 relative 一致。
2. 父容器不能限制溢出：父元素不能设置 overflow: hidden/scroll，否则粘性失效。
3. 父容器高度足够：父元素需有足够空间让元素触发粘性效果。

二、常见使用场景

1. 固定导航栏/表头

<nav style="position: sticky; top: 0;">导航栏</nav>
<table>
  <thead style="position