本文介绍使用 CSS position: sticky 替代绝对定位，实现在有限高度滚动容器中让标题始终悬浮于顶部、下方长内容自然溢出并覆盖其他元素的效果，无需 JavaScript 即可达成类似下拉菜单的视觉行为。
本文介绍使用 css `position: sticky` 替代绝对定位，实现在有限高度滚动容器中让标题始终悬浮于顶部、下方长内容自然溢出并覆盖其他元素的效果，无需 javascript 即可达成类似下拉菜单的视觉行为。
在构建具有局部滚动区域的 UI 组件（如折叠面板、筛选弹窗或带固定头部的列表）时，一个常见需求是：标题需随滚动“吸附”在容器顶部，而其后的内容应突破容器边界向下溢出显示（即视觉上覆盖后续元素），同时滚动行为在标题处停止，不带动下方长内容一起滚动。
直接使用 position: absolute 在 overflow-y: auto 的相对定位父容器中往往失效——因为绝对定位子元素脱离文档流，其高度不再参与父容器滚动高度计算，反而导致滚动范围异常扩大；更关键的是，它无法响应滚动位置变化实现“粘性停靠”。
✅ 正确解法是采用 position: sticky：
- sticky 是一种混合定位模式：在滚动到指定阈值前表现为 relative，越过阈值后表现如 fixed（相对于最近的滚动祖先定位）；
- 它天然保持文档流位置，不影响父容器高度计算，且能精准控制“吸附临界点”（通过 top 值）；
- 配合合理结构拆分（标题与内容分离），即可实现标题锁定 + 内容自由溢出的组合效果。
以下为优化后的完整示例代码：
<div style="max-height: 200px; width: 200px; overflow-y: scroll; border: 3px solid purple;">
<div style="height: 100px; background: blue;">box1</div>
<div style="height: 100px; background: green;">box2</div>
<!-- 标题区块：sticky 定位，top: 0 表示贴顶吸附 -->
<div style="background: yellow; position: sticky; top: 0; z-index: 10;">
<div>title</div>
</div>
<!-- 内容区块：无定位约束，高度可任意，自然溢出容器 -->
<div style="background: red; height: 400px;">
content that should appear beneath title and overlap everything when it needs more space so the scrolling will stop at title
</div>
</div>? 关键要点说明：
- ✅ position: sticky 必须配合 top（或 bottom/left/right）才生效，此处 top: 0 确保标题在滚动至顶部时立即吸附；
- ✅ z-index: 10 保证标题层叠在后续内容之上，避免被遮挡；
- ❌ 不要将 sticky 应用于过高的内容块（如原例中整个黄色+红色包裹块）——若 sticky 元素自身高度 > 容器高度，将失去吸附效果；
- ⚠️ 若需“红区内容”也具备部分粘性（例如分段标题），应将其拆分为多个独立的 sticky 元素，并确保每段高度 ≤ 容器可视区；
- ? 浏览器兼容性良好（Chrome 56+、Firefox 59+、Safari 15.4+、Edge 79+），移动端 Safari 需注意 -webkit-sticky 前缀（现代版本已普遍支持标准语法）。
最终效果：滚动时，蓝色和绿色区块正常进出视口；当“title”到达容器顶部时即锁定不动；继续滚动，红色长内容从标题下方持续展开，突破容器底部边界向外延伸，视觉上覆盖页面其他元素——完美模拟下拉菜单或浮动面板的行为逻辑。
