position: sticky 本身不支持跨方向独立锚定（如同时 top: 0 和 right: 0），需结合 left 或 transform 等技巧实现真正的右上角吸附效果。
`position: sticky` 本身不支持跨方向独立锚定（如同时 `top: 0` 和 `right: 0`），需结合 `left` 或 `transform` 等技巧实现真正的右上角吸附效果。
position: sticky 是一种混合定位行为：它在元素进入指定偏移范围前表现为 relative，进入后则像 fixed 一样相对于视口或最近的滚动祖先“粘住”。但关键限制在于——sticky 元素仅响应单轴方向的临界条件：top/bottom 控制垂直粘滞，left/right 控制水平粘滞；而浏览器不支持同时激活 top 和 right 实现二维粘滞。因此，仅设置 top: 0; right: 0 并不能让按钮始终贴合视口右上角。
✅ 正确解法：用 left 配合宽度控制模拟右对齐
最直接且兼容性良好的方式是：保留 top: 0 触发垂直粘滞，再通过 left: calc(100% - width) 或固定 left 值 + margin-left: auto 实现水平右对齐。由于 sticky 元素仍受父容器流式布局影响，我们可利用其 inline 特性配合 text-align: right 或绝对定位辅助：
div {
background-color: #ffe6e6;
overflow: auto;
height: 20rem;
width: 20rem;
position: relative; /* 为内部绝对定位提供参考 */
}
/* 推荐方案：sticky + left 计算（响应式） */
input.sticky-top-right {
background-color: #4a90e2;
color: white;
border: none;
padding: 8px 16px;
position: sticky;
top: 1rem; /* 可选：留出顶部间距 */
left: calc(100% - 80px); /* 假设按钮宽约80px，动态计算右对齐 */
z-index: 10;
}
/* 替代方案：父容器 text-align + sticky（更简洁） */
div.text-align-right {
text-align: right;
}
div.text-align-right input {
position: sticky;
top: 1rem;
margin: 0; /* 清除默认外边距干扰 */
}<div class="text-align-right">
<input type="button" value="Copy" />
<article>
Lorem ipsum dolor sit amet...
</article>
</div>⚠️ 注意事项：
- sticky 的生效依赖父容器具有滚动上下文（即 overflow: auto/scroll 且内容溢出），否则退化为 relative；
- left: 90%（如原答案所提）是启发式 hack，仅在按钮宽度固定且父容器宽度已知时勉强可用，不具备响应性，不推荐用于生产环境；
- 若需严格贴合视口右上角（而非父容器右上角），应改用 position: fixed，并配合 right: 1rem; top: 1rem —— 但此时元素将脱离文档流，不再随父容器滚动而移动；
- Safari 对 sticky 的 right/left 支持较晚（iOS 15.4+），务必测试目标环境。
✅ 最佳实践总结
| 场景 | 推荐方案 | 关键代码 |
|---|---|---|
| 按钮随父容器滚动区域右上角固定 | sticky + text-align: right | <div style="text-align:right"><button style="position:sticky;top:1rem"> |
| 按钮始终在整个页面视口右上角 | position: fixed | button { position: fixed; top: 1rem; right: 1rem; } |
| 需要精确像素对齐且按钮宽度已知 | sticky + left: calc(100% - [width]) | left: calc(100% - 72px); |
最终，sticky 的本质是“滚动感知的相对定位”，不是万能 fixed 替代品。理解其触发机制与局限，才能精准选择 sticky、fixed 或 absolute，构建稳健的 UI 锚点行为。
