只写position: fixed按钮就不见了，因为该声明仅使元素脱离文档流并以视口为参照，未指定right和bottom等锚点时，浏览器按默认流渲染，常堆在视口左上角甚至被裁剪；必须显式设置right和bottom才能精确定位到右下角。
为什么只写 position: fixed 按钮就不见了
因为 position: fixed 只是让元素脱离文档流，不指定锚点位置时，浏览器按默认流渲染——通常堆在视口左上角，甚至被裁剪不可见。它不会自动“停在右侧”。必须显式设置 right 和 bottom（或 top）才能定位。
- 只设
right: 24px不设bottom→ 按钮贴顶部，不是右下角 - 只设
bottom: 24px不设right→ 按钮贴左侧，视觉上像“没生效” - 用百分比（如
right: 5%）→ 缩放或横屏时偏移错乱，改用rem或px - 别依赖父容器的 Flex 布局去“推”它到右边——
fixed元素已脱离文档流，父级 Flex 完全无效
fixed 容器里用 Flex 布局为什么按钮堆成一团
根本原因是：未设宽高的 display: flex 容器，在 fixed 下实际尺寸常为 0px × 0px，子项无空间可排，全挤在原点。这不是 Flex 本身的问题，而是尺寸缺失。
- 必须显式写
width: 60px和height: 240px（或用min-height），不能靠子项撑开 - 方向固定用
flex-direction: column，避免默认横向排列导致图标错行 - 每个按钮加
flex: 0 0 auto，防止 SVG 或文字拉伸变形 - 用
gap: 8px控制间距，比margin-bottom更稳定（margin在fixed容器中易被外部样式污染）
移动端点不中、iOS 上抖动怎么修
热区小和抖动本质是两个问题：一个是点击坐标未对齐，一个是视口高度突变触发重绘。两者都和 fixed 的底层渲染机制相关。
- 按钮最小尺寸至少
width: 48px; height: 48px，符合 WCAG 触摸热区标准 - 加
touch-action: manipulation，禁用双击缩放，提升 iOS 点击响应率 - 底部距离用
bottom: max(24px, env(safe-area-inset-bottom))，避开 iPhone 底部手势条 - 避免
transform: translateY(-50%)垂直居中——iOS Safari 对fixed + transform渲染不稳定，改用margin-top: -XXpx或外层flex包裹 -
body加min-height: 100vh，防页面内容少时视口收缩引发抖动
z-index 明明设了 9999 还是被盖住
不是数值不够大，而是父级创建了新的层叠上下文（stacking context），把你的 z-index “截断”了。常见诱因比数值本身更关键。
- 检查按钮是否嵌套在带
transform、opacity: 0.99或will-change的父元素里——这些都会创建新层叠上下文 - 推荐值
z-index: 1050，介于 Bootstrap modal（1055）和 tooltip（1060）之间，避免冲突 - 别给
body或根容器设overflow: hidden，iOS 会裁剪fixed元素 - 确认没在
offcanvas或弹窗 JS 中动态给body加style="overflow: hidden"——这是隐藏的罪魁祸首
真正卡住人的，从来不是写几行 CSS，而是 computed 样式里那个始终为 0px 的 width 和 height；还有 iOS 上那个你没注意到的 env(safe-area-inset-bottom) 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
