fixed定位右下角元素消失的常见原因是父容器overflow:hidden导致裁剪，需检查html/body等祖先元素；同时注意body默认margin、IE兼容性、移动端视口变化、z-index层叠上下文及响应式偏移设置。
fixed定位右下角时元素消失不见
常见错误是父容器设置了 overflow: hidden 或 overflow: auto，导致 position: fixed 元素被裁剪——因为 fixed 虽脱离文档流，但依然受祖先元素的 overflow 影响（尤其在 Safari 和部分 Chrome 版本中）。
- 检查所有父级（包括
html、body）是否意外设置了overflow: hidden - 若必须保留滚动容器，改用
position: absolute+transform: translateZ(0)触发新层叠上下文，或把固定元素挂到body直接子级 - 用浏览器开发者工具选中该元素，看「Computed」面板里
position是否真为fixed，以及offsetParent是否异常
right: 0; bottom: 0 不生效的兼容性问题
IE11 及更早版本对 fixed 的支持不完整，且当页面存在缩放（如 Windows 缩放设置为 125%）或使用某些 CSS 重置库（如 normalize.css）时，bottom/right 可能计算偏移。现代浏览器中更常见的干扰来自 body 默认 margin。
- 确保
body无默认外边距：body { margin: 0; } - 避免在
html或body上设height: 100%同时又没设min-height: 100vh，否则滚动时fixed会相对视口错位 - 移动端 Safari 中，地址栏收起/展开会触发视口高度变化，
fixed元素可能短暂错位；可加min-height: 100vh到html缓解
需要带偏移或响应式右下角位置
纯 right: 0; bottom: 0 往往太贴边，实际项目常需留白或适配不同屏幕。此时不能只靠像素值硬写，得结合 calc() 和媒体查询。
- 留 16px 边距：
right: 16px; bottom: 16px; - 右侧留出侧边栏宽度（比如 240px）：
right: calc(100vw - 240px); bottom: 16px;，但注意100vw包含滚动条宽度，更稳写法是right: calc(100% - 240px)（前提是父容器宽度为 100%） - 小屏隐藏该元素：
@media (max-width: 768px) { .fab { display: none; } }
z-index 层叠顺序被遮挡
fixed 元素默认层叠上下文层级低，容易被 modal、header 或其他 position: relative 元素盖住，尤其当它们也设置了 z-index。
立即学习“前端免费学习笔记（深入）”；
- 给右下角元素设明确
z-index，常见值：99、999、9999（避免用 2147483647 这类魔数） - 确认它和遮挡它的元素不在同一个层叠上下文里；如果遮挡元素父级有
transform、opacity 或 <code>will-change，会创建新层叠上下文，此时子元素的z-index只在该上下文中生效 - 最简验证方式：临时加
outline: 2px solid red看是否真被盖住，还是根本没渲染出来
真正麻烦的不是写那三行 CSS，而是它一旦失效，你得同时排查布局、层叠、视口、缩放、祖先 overflow 五个方向。多数时候，问题不在 right 和 bottom 本身，而在它们生效的前提没被满足。
