关闭按钮不贴右上角的根本原因是父容器未设position: relative，导致absolute定位回退到body；需为弹窗容器设relative、按钮设absolute并用inset逻辑属性适配RTL，同时注意z-index和可访问性。
为什么关闭按钮总不贴右上角？关键在定位上下文
根本原因不是top或right写错了，而是关闭按钮的父容器没设position: relative。position: absolute会向上查找最近的「已定位祖先」（relative/absolute/fixed/sticky），如果没找到，就回退到body甚至html——按钮于是脱离弹窗，随页面滚动乱飞。
实操必须做这三件事：
- 给弹窗最外层容器（比如
<div class="modal">）加position: relative - 关闭按钮用
position: absolute，配合top: 12px和right: 12px（数值按设计稿微调） - 显式设置
z-index: 10或更高，否则可能被弹窗内容遮住
适配 RTL 时不要硬写 right: 12px
right: 12px在阿拉伯语或希伯来语页面里会把按钮钉死在物理右侧，而用户期望它出现在「文本起始侧」——也就是 RTL 下的左上角。这时候该用逻辑属性：inset-block-start + inset-inline-end。
正确写法：
立即学习“前端免费学习笔记（深入）”；
.close-btn {
position: absolute;
inset-block-start: 12px; /* 块方向起始 = 顶部 */
inset-inline-end: 12px; /* 行内结束 = LTR 是右，RTL 是左 */
}注意：
- 必须同时声明
inset-block-start和inset-inline-end，只写一个不会生效 - 不能和
left/right/top/bottom混用，否则逻辑属性会被覆盖 - 它的行为取决于父容器的
direction（如dir="rtl"），不是浏览器语言设置
常见静默失效：inset-inline-end 没反应？
这个属性“看起来没效果”基本就三个原因：
- 按钮元素没设
position: absolute或position: fixed——inset-*对static或relative无效 - CSS 中存在
right: 0或left: 0，浏览器直接忽略inset-inline-end - 父容器没设
direction: rtl（或dir="rtl"），导致它始终按 LTR 解析，inset-inline-end等价于right
调试建议：打开 DevTools，看 computed 样式里inset-inline-end是否解析成了right还是left。如果不是预期值，往上逐层检查dir属性有没有被中间某层显式覆盖。
移动端和可访问性容易漏掉的点
按钮看着小，但点击区域不能只靠图标尺寸。手指操作需要至少44×44px热区：
- 用
padding: 6px 8px扩展开，别碰font-size或width——避免破坏绝对定位对齐 - 加
cursor: pointer和:focus { outline: 2px solid #007bff }，键盘用户靠 Tab 切换，屏幕阅读器靠它识别可交互 - 如果用伪元素画 ×，确保
content: ""且加aria-hidden="true"
真正卡住人的从来不是“怎么写定位”，而是computed样式里那个被悄悄覆盖的right值，或者父容器漏掉的position: relative。多花两秒看一眼 DevTools 的 computed 面板，比反复调top值快得多。
