关闭按钮不贴右上角的根本原因是父容器未设position: relative，导致absolute定位基准丢失而回溯至body或html；须为弹窗最外层容器显式添加position: relative，并配合top/right偏移、z-index层级及可访问性样式确保稳定显示。
关闭按钮为什么总不贴右上角？
因为 position: absolute 是相对于最近的「已定位祖先元素」（即 position 为 relative、absolute、fixed 或 sticky 的父容器）计算偏移的。如果弹窗容器没设 position: relative，按钮就会往上找——可能跑到 body 或 html 边缘，完全偏离预期。
实操建议：
- 给弹窗最外层容器（比如
<div class="modal">）加上position: relative - 关闭按钮用
position: absolute，再配合top: 12px和right: 12px（数值按需调整） - 务必设置
z-index，否则按钮可能被弹窗内容遮住
按钮位置偏移量怎么选才不踩坑？
用 top/right 比用 transform 更可控，尤其当弹窗本身有 padding 或 border 时。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用
top: 0; right: 0但按钮紧贴边缘，视觉拥挤 → 改成top: 8px; right: 8px - 按钮文字或图标被截断 → 检查父容器是否设置了
overflow: hidden - 在移动端点击区域太小 → 给按钮加
padding: 6px，并用box-sizing: content-box避免撑大绝对定位框
关闭按钮要不要加 cursor: pointer 和 focus 样式？
要。这不是“锦上添花”，而是可访问性刚需——键盘用户靠 Tab 切换焦点，屏幕阅读器靠它识别可交互元素。
实操建议：
- 必须写
cursor: pointer，否则鼠标悬停无反馈 -
:focus状态加outline（如outline: 2px solid #007bff），别用outline: none - 如果用伪元素画 ×（比如
::before+::after），确保content不为空，且有aria-hidden="true"
IE11 下 position: absolute 右上角失效怎么办？
IE11 对 flex 容器内的绝对定位支持不一致，若弹窗用了 display: flex，按钮可能定位错乱。
兼容性处理：
- 避免在
flex父容器上直接放absolute子元素；改用position: relative包裹层 - 不要依赖
inset（如inset: 12px auto auto 12px），IE11 不支持 - 测试时打开 IE11 开发者工具，检查按钮的 computed
top/right是否被重写为auto
top 值更省时间。 
