position: fixed 元素右下角固定失效主因是父容器设置了 transform、filter 或 perspective，创建了新定位上下文；应移至 body 子级或移除相关样式，并注意移动端键盘及滚动场景的兼容处理。
用 position: fixed 实现右下角固定，但得注意父容器干扰
直接写 position: fixed; bottom: 0; right: 0; 确实能让元素贴在视口右下角，但常见问题是：元素没出现在预期位置，甚至完全消失。根本原因往往是父元素设置了 transform、perspective 或 filter —— 这些属性会创建新的定位上下文（containing block），导致 fixed 脱离视口，转而相对于该父容器定位。
排查时可检查父级是否含以下任意样式：
-
transform: translateX(0)（哪怕只是为触发硬件加速） filter: blur(1px)perspective: 1000px
解决办法是把该元素移到 <body> 直接子级，或移除触发新 containing block 的父级样式。
bottom 和 right 值不为 0 时的常见误判
写成 bottom: 20px; right: 20px; 看似合理，但要注意：它表示「距离视口底部 20px、右侧 20px」，不是距离右下角「角点」的偏移。如果页面有横向滚动条（比如内容超宽），right: 20px 仍以视口右边缘为基准，不会随内容滚动而“粘”在内容右下角——这是 fixed 的本质行为，不是 bug。
立即学习“前端免费学习笔记（深入）”；
若需相对「内容区域」右下角固定（如弹窗随内容滚动而保持在内容末尾附近），应改用 position: absolute + JS 动态计算，或用 position: sticky 配合容器高度控制（但 sticky 不支持 bottom/right 同时设）。
移动端 Safari 下 fixed 在键盘弹出时错位
iOS Safari 在软键盘弹出时，常把 fixed 元素顶到键盘上方，甚至遮挡输入框。这不是 CSS 失效，而是浏览器将视口高度重置为缩小后的可用区域，导致 bottom: 0 指向键盘顶部而非屏幕底边。
临时缓解方式（非完美）：
- 监听
focus事件，在输入框聚焦时临时改为position: absolute并用 JS 计算位置 - 用
viewportmeta 的height=device-height（已不推荐，兼容性差） - 避免在键盘频繁弹出区域（如表单页底部）放关键
fixed操作按钮
更健壮的做法是放弃纯 CSS 方案，改用 getBoundingClientRect() + resize / scroll 事件动态锚定。
body {
margin: 0;
}
#floating-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: #007AFF;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
/* 确保不被其他 fixed 元素遮挡 */
z-index: 1000;
}真正难处理的不是写法本身，而是定位上下文和视口行为的隐式变化——尤其当项目里混用动画、滚动库、第三方 UI 组件时，fixed 很容易悄无声息地失效。
