最可靠的方式是父容器设 position: relative，按钮设 position: absolute 并用 top 和 right 定位；flexbox 适合需等高、居中或间隙的场景；需注意 z-index、pointer-events、响应式单位及 fixed 定位的适用条件。
按钮定位用 position: absolute 最直接
右上角不是靠 text-align: right 或 float: right 能搞定的，那只能推到行尾，不是视口右上角。真正可靠的方式是让父容器设 position: relative，两个按钮设 position: absolute 并用 top 和 right 控制位置。
- 父容器必须有定位上下文（比如
position: relative），否则absolute会往上找直到body，容易错位 - 两个按钮默认会重叠，得用
right值错开，比如一个设right: 10px，另一个设right: 60px - 如果父容器高度不固定，
top: 0是最稳妥的起始点；加margin-top或transform反而增加不确定性
Flexbox 方案适合带间距/对齐需求的场景
如果两个按钮需要等高、垂直居中、或中间留固定间隙，用 Flexbox 更可控。但要注意：它天然作用于“内部布局”，不能直接把按钮钉在视口右上角，得配合容器尺寸和定位策略。
- 父容器设
display: flex+justify-content: flex-end+align-items: flex-start - 必须限制父容器高度（比如
min-height: 100vh）或确保它撑开，否则按钮会贴在内容块右上，不是视口右上 - 按钮间加空隙推荐用
gap: 8px，别用margin——后者在 flex 容器里容易受justify-content干扰
z-index 和点击穿透问题常被忽略
两个按钮叠在右上角后，可能被导航栏、弹窗遮住，或者点不到——这不是代码没生效，而是层叠上下文或 pointer-events 搞的鬼。
- 确保按钮的
z-index高于周边元素（比如设z-index: 100），但别盲目堆高数字，先查父级有没有创建新层叠上下文 - 检查父容器是否意外加了
pointer-events: none（常见于遮罩层逻辑），会导致子按钮失效 - 移动端要额外加
touch-action: manipulation，避免 300ms 点击延迟影响响应感
响应式下右上角位置会“漂移”
桌面端调好的 right: 12px; top: 12px，到了小屏可能紧贴边缘甚至被截断。这不是 bug，是 viewport 缩放和滚动条宽度变化导致的计算偏移。
立即学习“前端免费学习笔记（深入）”；
- 优先用
rem或em替代px，比如right: 0.75rem，能随根字号缩放 - 避免用
right: 0紧贴边缘——滚动条出现时，0会变成“滚动条内侧”，视觉上偏左；改用right: 1rem更稳 - 如果页面允许横向滚动，绝对定位按钮会随内容移动，这时得加
position: fixed，但要小心它脱离文档流后影响其他元素布局
position: absolute 配合明确的父容器就够了。复杂交互才轮到 fixed 或 flex 套嵌；真遇到点不中、错位、闪动，八成是 z-index 层级、pointer-events 或父容器定位状态没理清。 
