唯一稳定方案是position: fixed + display: flex + 显式宽高；fixed元素脱离文档流，未设宽高的flex容器实际尺寸常为0导致错位或不可点击；须显式设置width、height，用flex-direction: column和flex: 0 0 auto防变形，并加will-change: transform缓解ios抖动。
直接结论：用 position: fixed + display: flex + 显式宽高，是唯一稳定可行的组合；靠 align-items 或父容器 Flex 上下文去“居中”侧边栏，基本无效。
fixed 容器为什么总错位或点不中？
根本原因是 position: fixed 元素脱离文档流，而 Flex 容器本身不会自动撑开尺寸——它只按内容或显式设置的宽高来分配空间。没设 width 和 height 的容器，实际尺寸常为 0，按钮就堆在左上角或完全不可见。
- 必须给容器设
width（如width: 60px）和height（如height: 240px），不能依赖子项撑开 - 方向必须明确：侧边工具栏用
flex-direction: column，避免默认横向排列 - 按钮自身用
flex: 0 0 auto，防止被拉伸变形（尤其 SVG 图标容易失真） - 别同时写
right: 24px又加justify-content: flex-end——定位值和 Flex 对齐逻辑会冲突
如何让按钮组真正悬浮在右下角并可点击？
“悬浮在右下角”不是靠 bottom: 0; right: 0 就完事。iOS Safari、部分 Chrome 版本下，软键盘弹出或快速滚动时，fixed 元素可能短暂跳位；更常见的是点击区域远小于视觉区域，本质是容器未占满可用空间。
- 容器用
right: 24px（非0）+bottom: 24px，留出安全边距防截断 - 每个按钮统一设
width: 100%和固定height（如height: 48px），别靠文字撑开 - 用
gap: 8px控制按钮间距，比margin更稳定（margin在fixed下易被外部样式污染） - 检查 computed 样式里容器的
width/height是否如预期——90% 的“点不中”问题都源于这个值为 0
iOS Safari 里按钮上下抖动怎么压住？
iOS Safari 对 fixed + flex 组合渲染不稳定，滚动或键盘唤起时，按钮可能瞬间跳到顶部或底部。这不是 bug，而是 WebKit 渲染管线对视口锚点重计算的延迟表现。
- 必须加
will-change: transform到容器上，触发硬件加速，大幅缓解抖动 - 避免在容器上同时设
top/bottom和transform: translateY()——叠加使用反而加重跳变 - 如果按钮内含
<svg></svg>，务必在标签里写死width和height属性（如<svg width="24" height="24"></svg>），纯 CSS 缩放会加剧渲染偏移 - 慎用
overflow: hidden在容器上——它可能剪掉 iOS 上因抖动产生的临时溢出，但掩盖了真实问题
最易被忽略的点：所有 fixed 工具栏都得独立于主布局流之外，别把它塞进某个 display: flex 的父容器里指望靠 align-items 居中——它已经不在那个流里了。你控制的，只是它自己内部的 Flex 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
