position: fixed 的坐标基准是视口左上角，右下角定位应使用 bottom 和 right；safari 下跳动需监听 resize 动态更新 bottom；z-index 失效常因祖先元素创建层叠上下文；适配安全区用 env(safe-area-inset-bottom)。
元素固定在右下角时，position: fixed 的坐标基准是什么
它始终相对于视口（viewport）左上角计算，不是父容器，也不是文档流位置。这意味着 top 和 left 从顶部、左侧起算；要右下角，得用 bottom 和 right。
常见错误是写成 top: 100%; right: 0;——这会让元素跑到视口最底部再往下移自身高度，直接消失。正确做法是明确用 bottom 和 right。
-
bottom: 20px;表示距离视口底边 20px -
right: 20px;表示距离视口右边 20px - 避免混用
top/bottom或left/right同时设值，浏览器会按规范忽略其中一个（通常忽略top）
移动端 Safari 下 fixed 元素滚动时“跳动”或“错位”怎么办
这是 Safari 在地址栏收起/展开时重绘视口高度导致的，bottom 值仍按旧高度计算，造成定位偏移。
根本原因不是 CSS 写错了，而是视口尺寸动态变化未被响应。不能靠 vh 单位解决（Safari 对 100vh 的处理也不稳定）。
- 临时缓解：加
transform: translateZ(0);强制硬件加速，减少跳动感（但不治本） - 更稳妥的做法：监听
resize事件，用 JS 动态更新bottom值（注意节流） - 如果元素内容简单且不需绝对跟随底边，可考虑改用
position: absolute+bottom: 0放在body最后子节点，依赖文档流兜底（仅适用于无滚动穿透场景）
z-index 不生效？固定定位元素被其他内容盖住的典型原因
position: fixed 元素默认创建新的层叠上下文，但它的 z-index 只在**同级层叠上下文内**起作用。如果父容器有 transform、opacity 、<code>filter 等属性，就会悄悄创建一个新层叠上下文，把子元素的 z-index 锁死在里面。
- 检查该元素所有祖先是否设置了
transform（哪怕只是transform: translateZ(0)） - 确认没有父级设置了
will-change: transform或opacity: 0.99这类隐式触发层叠上下文的属性 - 最简验证方式：给该元素加
z-index: 9999;并同时加position: relative;到body，看是否立刻可见——若可见，说明是祖先层叠上下文干扰
需要带偏移或响应式间距时，别硬调 px 值
固定在右下角的按钮或提示条，常要适配小屏（比如 iPhone 底部安全区）、大屏（留白太多）、横竖屏切换。纯 right: 20px; bottom: 20px; 在 iPhone X+ 上会被 Home Indicator 挡住。
- 优先用
env(safe-area-inset-bottom)替代固定像素：bottom: calc(20px + env(safe-area-inset-bottom)); -
right同理可用env(safe-area-inset-right)，但右下角一般只需处理底部 - 如果兼容性要求覆盖 iOS 10 以下，需 JS 检测
safeAreaInsets并 patch 样式（现代项目基本可忽略） - 不要用
margin或padding模拟偏移——fixed元素的 margin 不影响定位基准，只会撑开自身盒模型
真正难的不是写对那两行 CSS，而是想清楚这个“右下角”到底要贴谁的底边：是视口？是安全区？还是某个滚动容器？选错基准，后面全得返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
