TRAE-AI编程
让页面右侧始终留在可视区，最稳的做法是用 position sticky 配合 top，比 fixed 更不易错位。CSS 粘性定位正是为这种滚到某处就吸住的需求而生。你做后台页面时大概遇到过：左边长长内容列表，右边目录或按钮，希望滚动时右侧别跑出屏幕。本文给出可运行 HTML/CSS，并讲清 sticky 失效的常见原因与处理办法，帮你一次把右侧常驻做对。把这个效果做对，后台的操作区和目录就能一直可见，体验立刻不一样。
先看结论
- 让右侧常驻可视区，首选 CSS 粘性定位里的
position: sticky加top，而不是position: fixed。 - sticky 是相对「最近的可滚动祖先」生效的，父容器高度不够就会看不出效果。
- 父元素一旦设了
overflow: hidden / auto / scroll，sticky 很容易失效，这是头号坑。 - 用 flex 把左右并排时，记得给侧边栏加
align-self: flex-start，否则会被拉伸到和左栏同高。 - 需要兼容极老浏览器再考虑 fixed，但 sticky 在现代项目里已经足够稳。
- 适用边界上，sticky 只在右栏比左栏矮、父链无
overflow干扰时才有意义，超出可视区高度就退化为普通流，不必硬调。
一、为什么 fixed 容易翻车
先建立直觉：CSS 粘性定位常用于「滚到某位置才吸住」的场景，而 fixed 是相对视口永远不动。在 CSS 布局里，sticky 比 fixed 更贴合跟随滚动的需求。比如父容器一旦有 transform 或缩放，fixed 会相对那个变换后的盒子定位，右侧常常被挤到视口外；sticky 则跟着文档流走，位置始终可预期，调试时也更省心。问题在于 fixed 会脱离文档流，一旦页面有缩放、变换或嵌套滚动容器，右侧就容易和左侧内容对不齐，修起来很烦。
<div class="wrap">
<div class="main">长内容区</div>
<aside class="side">右侧固定块</aside>
</div>上面这段是左右两栏的 HTML 骨架。要让右侧常驻，关键在 CSS 怎么写，下面给出可运行版本。语法不熟可先看 HTML 教程 的盒子模型一章。真正上线前，记得在真实内容高度下滚一遍：短内容场景里 sticky 本就不会吸住，不必当成 bug 去反复调参。
二、用 position sticky 实现右侧常驻
2.1 步骤：并排 + 吸顶
下面这份是完整可运行的页面，核心就是 .side 上的 position: sticky 和 top。
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<style>
.wrap { display: flex; }
.main { flex: 1; height: 2000px; padding: 16px; }
.side {
width: 240px;
align-self: flex-start; /* 不被拉伸到和左栏等高 */
position: sticky; /* 关键：粘性定位 */
top: 16px; /* 距滚动可视区顶部 16px 时吸住 */
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">左侧长内容，滚动时右侧不动</div>
<aside class="side">右侧目录 / 操作区</aside>
</div>
</body>
</html>
上面这段做的是用 flex 把两栏并排，再给右侧常驻的导航侧边栏加 position: sticky 和 top: 16px。保存成 .html 用浏览器打开，预期结果是：向下滚动时左侧内容上移，右侧那块滚到距顶部 16px 处就停住，直到左栏滚完——这就是「始终留在可视区」的效果。属性细节可对照 CSS 参考手册。如果你的右栏内容比左栏短很多，sticky 常常不会真正触顶，这时它看起来和普通流没区别，属于正常表现而非写错，不必强求吸住。补充一点：sticky 对浏览器版本要求不高，现代环境都能直接用；只有要兼容很老的 IE 才需要考虑 fixed 降级，而那种场景如今越来越少。
2.2 失败分支：父容器 overflow 导致 sticky 失效
最常见的坑是某层祖先设了 overflow: hidden，于是 sticky 找不到可滚动祖先，直接变回普通流：
.wrap { display: flex; overflow: hidden; } /* 错误：撑掉了 sticky */
这段写法下右侧会跟着一起滚走，表现和没写 sticky 一样。修复是去掉祖先的 overflow: hidden，或把滚动容器显式设成 overflow: auto 并给它固定高度，让 sticky 有明确的参照系。改完刷新页面，右侧重新吸住即修复成功。这个坑在组件库里尤其常见：外层为了裁剪阴影或圆角顺手加了 overflow: hidden，内部 sticky 就集体失灵，排查时要一层层往上翻父级。标签与属性清单可查 HTML 参考手册。
三、高度不够与 flex 拉伸两个边角问题
3.1 症状与定位
有时 sticky 写了却不生效，另一类原因是 .side 自己被 flex 默认 align-items: stretch 拉得和左栏一样高——它整列都在可视区里，自然「没有可吸的空间」。定位办法是打开开发者工具看右栏高度是否等于左栏。
3.2 修复
加 align-self: flex-start（代码里已给），让侧边栏按自身内容高度排布，sticky 才有生效余地。完整写法见 CSS 教程 的粘性定位章节。
在移动端或窄屏里，CSS 粘性定位同样有效，但要留意父级高度和键盘弹起时的视口变化：一旦右栏自身高度超过滚动可视区，sticky 会失去可吸的空间，表现回退成普通流。遇到这种情况，先量一下右栏真实高度，再决定是否要把它改成可折叠的抽屉，而不是继续堆 sticky 参数。另有一类「伪失效」是开发者工具里结构看对了、却忘了父容器有 transform 或 will-change，这类属性会建立新的包含块，让 sticky 的参照系悄悄改变。
总结
要点带走：
- 右侧常驻可视区优先用
position: sticky+top，比 fixed 更好对齐； - sticky 相对最近可滚动祖先生效，父容器
overflow设错是头号失效原因； - flex 并排时给侧边栏加
align-self: flex-start，避免被拉伸导致无效果； - 左栏要有足够高度，sticky 才有「滚到顶才吸住」的空间；
- 验证用浏览器实际滚动一次，比看代码更靠谱。
下一步建议把上面的片段存成文件打开滚一下，先确认基础效果，再迁到你真实的页面结构里。实际项目里，先确认右栏比左栏矮、父链没有 overflow 干扰，再动手写 sticky，基本一次就能成。
常见问题
Q：sticky 和 fixed 最大的区别是什么？
A：fixed 永远相对视口，会脱离文档流、容易错位；sticky 相对最近可滚动祖先，在未触发前仍占正常位置，更适合跟随滚动。
Q：为什么我写了 sticky 却完全没反应？
A：十有八九是某层祖先设了 overflow: hidden / auto，或父容器高度不够。先查这两点。
Q：sticky 的 top 可以写百分比吗？
A：可以，top 接受长度或百分比，百分比相对最近可滚动祖先的高度计算，按需要选即可。
Q：移动端能用 sticky 吗？
A：现代移动浏览器都支持 sticky，但要注意父级高度和键盘弹起时的视口变化，建议真机滚一遍验证。
Q：右侧要吸在底部而不是顶部怎么办？
A：把 top 换成 bottom，元素会在滚到底部前吸在距底 bottom 值的位置，逻辑一致。
延伸学习
想继续打磨布局能力，可以按这个顺序：
- 系统补 CSS 基础，CSS 入门课程 覆盖选择器到定位的完整链路；
- 想看另一种常驻布局的写法，读一篇相关笔记 div 水平垂直居中；
- 想直接在线试跑上面的片段，用 HTML 在线运行 粘贴代码即可验证。
