学习前提
理解盒模型、overflow、定位和文档流。
本课完成后你能做什么
定位sticky失效和横向溢出的来源，而不是靠隐藏内容掩盖问题。
先理解机制
overflow决定超出盒子的内容如何处理。auto可能生成滚动容器，hidden会裁切，visible允许溢出；这些选择影响的不只是外观，还可能改变sticky参考的滚动祖先。先画出祖先链，标注每层高度与overflow，再分析定位。
sticky元素先参与普通流，再在滚动条件满足时受top等偏移约束。它需要可用滚动空间，祖先高度过短或没有实际滚动时，可能看不出粘性效果。给top设0并不意味着固定到整个浏览器，它受对应滚动容器和包含块约束。
横向溢出先用元素边界定位：长单词、固定宽度图片、Grid最小轨道、Flex自动最小尺寸都可能参与。代码块可以局部横向滚动，但正文通常应换行。对根元素overflow-x:hidden会让问题消失在截图外，却可能截掉按钮与焦点。
多个粘性标题重叠时需要明确背景和层叠关系，否则下方内容可能透出。测试键盘聚焦到滚动区内部的链接，确保粘性区域不会遮住目标。可根据布局为锚点设置scroll-margin-top。
可运行示例
运行方式：将HTML示例保存为独立的.html文件并在浏览器打开；含脚本的示例使用现代浏览器。资源文件与多文件模块另按正文要求准备。
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Honeysuck practice</title></head><body>
<style>
.panel{height:260px;overflow:auto;border:1px solid #bdcdbf;max-width:600px}
.panel h2{position:sticky;top:0;margin:0;padding:12px;background:#e9f2e4;z-index:1}
.panel p{padding:16px;min-height:150px;margin:0;border-bottom:1px solid #ddd}
.panel a{scroll-margin-top:70px}
</style><section class="panel" tabindex="0" aria-label="Scrollable lessons"><h2>Course notes</h2><p>First note. Scroll inside this panel.</p><p>Second note with more reading.</p><p><a id="last" href="#last">Last note</a></p></section>
</body></html>推演与验证
滚动panel而不是整个页面，标题应留在panel顶部。把height删除，panel可能不再需要滚动，观察sticky表现变化。再把overflow改为visible，比较真正发生滚动的是谁。每次只改一项并还原后再试下一项。
常见错误与边界
给每个祖先加z-index不能修复滚动容器选择错误。position:fixed与sticky并非可互换的补丁，前者脱离普通流并改变布局占位。
动手练习
在面板中增加长URL和代码块：正文能换行，代码块仅在自己内部横向滚动，整页不横向溢出。
参考解法与理由
对正文设置overflow-wrap:anywhere，对pre设置max-width:100%和overflow:auto。先解决父容器的最小尺寸限制，再用局部滚动处理确实不能换行的内容。