position: absolute 必须配合 top/right/bottom/left 偏移值才生效，否则仅脱离文档流；定位参考最近非 static 祖先，无则以 body 为基准；按钮需设 position: relative 作定位上下文；移动端慎用固定像素偏移。
按钮设 position: absolute 必须配偏移值才生效
只写 position: absolute 不会让按钮移动，它只是脱离文档流——视觉上可能“没变”，但后续元素会顶上来，造成布局错乱。真正起作用的是 top、right、bottom、left 中至少一个。
常见错误现象：
— 按钮突然“消失”或叠在页面左上角
— 设了 top: 10px 却没反应
- 必须指定至少一个方向偏移，例如
top: 20px; right: 16px; - 想靠右对齐优先用
right: 0，比算宽度 +left更可靠 - 避免同时写
left和right（除非有意拉伸按钮宽度）
父容器不加 position: relative，按钮就飞到 <body>
position: absolute 的定位参考点是**最近的非 static 祖先元素**。如果所有父级都没设 position，浏览器最终会以 <body> 为基准——按钮就会固定在视口左上角，而不是你期望的按钮旁边或弹窗内。
- 给直接包裹按钮的容器加
position: relative（哪怕它不需要偏移） - 不要靠多层
absolute嵌套来“修正”位置，容易失控 - 用浏览器开发者工具检查
offsetParent，能立刻确认当前参考容器是谁
图标按钮里放 SVG 或伪元素时，需配合 position: relative 容器
带图标的按钮常需内部图标精确定位（比如左对齐文字、垂直居中），这时按钮本身必须是定位上下文，否则 ::before 或内联 <svg> 的 position: absolute 会失效或错位。
立即学习“前端免费学习笔记（深入）”；
- 按钮标签加
position: relative和足够padding-left（留出图标空间） - 伪元素用
left: 8px; top: 50%; transform: translateY(-50%)垂直居中 - 内联 SVG 加
class="btn-icon"，再单独设.btn-icon { position: absolute; ... } - 悬停时改图标颜色用
.icon-btn:hover .btn-icon { fill: #4a6fa5; }，别漏写父选择器
移动端慎用固定像素偏移
在小屏设备上，top: 40px; left: 300px 这类写死的值极易导致按钮被截断、压住内容，或超出视口。
- 优先用
right: 16px; bottom: 16px配合min-width控制安全距离 - 响应式场景下，考虑用
calc(100% - 64px)替代绝对像素 - 真需要动态计算位置（如锚点跟随），用 JavaScript 读
getBoundingClientRect()，别依赖offsetTop（IE 兼容性差且易错）
最常被忽略的是：absolute 按钮一旦脱离文档流，它的 z-index 就只在同级兄弟中生效；如果父容器没设 z-index 和 position，再高的子级 z 值也会被隔壁区块盖住。
