position: sticky 本身不支持 right + top 同时生效的“角落吸附”，需结合 left（或 transform）等技巧实现真正意义上的右上角固定，且保持响应式与父容器尺寸无关。
`position: sticky` 本身不支持 `right` + `top` 同时生效的“角落吸附”，需结合 `left`（或 `transform`）等技巧实现真正意义上的右上角固定，且保持响应式与父容器尺寸无关。
position: sticky 是一种混合定位行为：它在元素进入视口指定偏移范围前表现为 relative，进入后则像 fixed 一样“粘住”于滚动容器边界。但关键限制在于：sticky 元素仅对 top 或 bottom（垂直方向）生效；left/right（水平方向）在标准规范中不会触发粘性行为 —— 这正是原问题中按钮能随垂直滚动固定在顶部、却无法随水平滚动固定在右侧的根本原因。
要实现「始终锚定在父容器右上角」的效果，推荐以下两种可靠方案：
✅ 方案一：用 left 配合 right: 0（兼容性好，无需 JS）
通过设置 left: auto（显式重置）并利用 right: 0 + top: 0，再配合 margin-left: auto 或 left: calc(100% - width) 实现右对齐。但更简洁的做法是：将 sticky 元素包裹进一个 text-align: right 的内联容器中，并确保其 display: inline-block。不过最直接的 CSS-only 解法是：
div {
background-color: red;
overflow: auto;
height: 20rem;
width: 20rem;
position: relative; /* 确保 sticky 有明确的包含块 */
}
input {
background-color: blue;
color: white;
border: none;
padding: 0.5rem 1rem;
position: sticky;
top: 0;
right: 0;
/* 关键：用 left 控制水平位置，覆盖 right 的无效行为 */
left: auto; /* 重置 left，默认为 auto */
margin-left: auto; /* 配合 display: block 实现右推 */
display: block;
}
但注意：margin-left: auto 在 display: block 下仅对齐到行末，若父容器宽度不定，需更鲁棒的方式。因此推荐使用 transform 辅助微调：
input {
position: sticky;
top: 0;
right: 0;
transform: translateX(0); /* 强制重绘，提升 sticky 可靠性 */
}
然而，上述仍可能在某些浏览器中失效。生产环境最稳妥的实践是：将 sticky 元素设为 position: sticky; top: 0;，再通过其父级（inline 容器）控制水平对齐：
<div>
<div style="text-align: right;">
<input type="button" value="copy">
</div>
<article>...</article>
</div>
div > div {
position: sticky;
top: 0;
z-index: 10;
}
input {
background-color: #007bff;
color: white;
border: none;
padding: 0.4rem 0.8rem;
cursor: pointer;
}
✅ 方案二：现代推荐 — 使用 position: sticky + inset（CSS Logical Properties）
如需语义化且未来兼容，可采用逻辑属性（需现代浏览器支持）：
input {
position: sticky;
inset-block-start: 0; /* = top */
inset-inline-end: 0; /* = right */
margin-inline-start: auto; /* 推向行尾 */
}
⚠️ 注意事项
- sticky 生效的前提是：父容器必须有明确的高度/溢出（如 overflow: auto/scroll），且不能是 overflow: hidden；
- 不要同时设置 left 和 right（除非用 calc() 显式计算宽度），否则可能冲突；
- 若父容器宽高动态变化，建议用 max-width: fit-content 或 width: max-content 避免按钮换行；
- 移动端需测试 touch-action 和滚动性能，必要时添加 will-change: transform 优化。
✅ 总结
position: sticky 无法原生实现“右上角双轴粘性”，但通过 top: 0 + right: 0 + margin-left: auto / text-align: right 包裹 / 或 inset 逻辑属性，即可稳定达成目标。优先选择语义清晰、无需 JavaScript、兼容主流浏览器的包裹容器方案，兼顾可维护性与健壮性。
