本文介绍如何使用 CSS position: sticky 与容器级滚动结合，让右上角工具箱始终固定在视口角落，同时正文文本在限定高度内独立垂直滚动、且自然环绕该工具箱。
本文介绍如何使用 css `position: sticky` 与容器级滚动结合，让右上角工具箱始终固定在视口角落，同时正文文本在限定高度内独立垂直滚动、且自然环绕该工具箱。
在网页布局中，常需将功能面板（如工具箱、操作栏）固定于内容区域的右上角，同时保证主文本流能正常环绕该元素——但若直接对文本容器设置 overflow-y: scroll，往往会导致浮动失效或布局断裂。根本原因在于：float 元素脱离文档流后，其父容器若启用滚动，会破坏浮动上下文的渲染逻辑。
✅ 正确解法是将“定位”与“滚动”职责分离：
- 工具箱不再依赖 float 实现定位，而是采用 position: sticky + top: 0，使其在滚动容器内始终保持相对顶部锚定；
- 文本内容与工具箱共同包裹在一个具有固定高度和 overflow-y: auto 的容器中，形成统一滚动上下文；
- 利用 sticky 的天然特性（仅在容器内滚动时生效），确保工具箱始终“粘”在容器顶部右角，不随文本滚动而位移。
以下是完整、可直接运行的实现代码：
<div class="container">
<div id="blue" class="box"></div>
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <!-- 更多文本... -->
</div>
</div>.container {
height: 120px;
overflow-y: auto; /* 关键：滚动作用于整个容器 */
border: 1px solid #ddd; /* 可选：便于观察边界 */
}
.box {
width: 100px;
height: 40px;
background-color: blue;
position: sticky;
top: 0;
margin-left: auto; /* 配合 display: flex 或 text-align 可优化对齐，此处依赖默认块级行为 */
float: right; /* 保留 float 仍有助于文本环绕（尤其在 sticky 生效前的初始渲染） */
}
#text {
/* 无需设置高度或 overflow，由 .container 统一控制 */
line-height: 1.5;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- position: sticky 必须配合有效的 top/bottom 值及非 static 的父容器定位上下文（此处 .container 默认即可，无需额外设 position）；
- 若文本环绕效果不理想（如首行未绕过盒子），可为 #text 添加 clear: right，或改用 display: flow-root 清除浮动影响；
- 在 Safari 等旧版浏览器中，sticky 对 float 元素的支持可能存在兼容性问题，建议测试或添加 margin-right 微调间距；
- 不推荐对 #text 单独设 overflow —— 这会将其与工具箱隔离在不同滚动层，导致定位失效。
? 总结：此方案以语义清晰、兼容性良好、维护成本低为核心优势。它规避了绝对定位（absolute）导致的脱离文档流、无法自动环绕的缺陷，也避免了 float + overflow 组合引发的经典布局断裂问题，是现代 CSS 布局中处理「悬浮式侧边组件 + 可滚动正文」场景的推荐实践。
