Sticky vs. Fixed Positioning 粘性定位 Sticky vs. 固定定位 Fixed web
Two ways to keep an element visible with different containing blocks
两种让元素保持可见的定位方式，包含块各不相同
Scrollable pane
Component notes
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Sticky threshold吸顶阈值
top“The point where the header stops scrolling and sticks” is the sticky threshold.
「头部停止滚动、粘住不动的那个点」就是吸顶阈值。
Prompt fragmentPrompt 片段the CSS top inset defining the threshold where a position: sticky element becomes pinned
CSS top 偏移值，定义 position: sticky 元素开始钉住的阈值
-
2 Sticky scroll container吸顶滚动容器
position: sticky“The panel the sticky header is trapped inside” is its scroll container.
「把吸顶头部困在里面的那个面板」就是它的滚动容器。
Prompt fragmentPrompt 片段the nearest scrolling container that bounds the position: sticky element's travel
最近的滚动容器，限定 position: sticky 元素的活动范围
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Use position: sticky with top: 0 for the section header so it scrolls normally until it reaches the top of its nearest scrolling container, then remains there. Reserve position: fixed for UI that must stay anchored to the viewport independently of every scroll container.
分区头部用 position: sticky 加 top: 0：它先正常滚动，到达最近滚动容器的顶部后就停在那里。position: fixed 只留给必须锚定在视口、不受任何滚动容器影响的 UI。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my sticky/fixed positioning. Rule out: sticky doing nothing because an ancestor has overflow hidden/auto/scroll — that is the classic; sticky missing a top/bottom offset so it never engages; fixed behaving like absolute inside a transformed/filtered ancestor; the content jumping when an element switches to fixed because no placeholder reserves its height. The symptom:
调试我的 sticky/fixed 定位。排查：sticky 完全无效，因为祖先有 overflow: hidden/auto/scroll——经典坑；sticky 没设 top/bottom 偏移，永远不会触发；fixed 在带 transform/filter 的祖先里表现得像 absolute；元素切到 fixed 时内容跳动，因为没有占位保留它的高度。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| CSS | position: sticky | |
| CSS | position: fixed | |
| CSS | top |