<p>侧边按钮须用position: fixed配合top: calc(50% - 24px)和right: 16px实现稳定垂直居中，禁用transform；热区扩展用::before伪元素；弹层需同为fixed定位；z-index失效需检查层叠上下文。</p>
侧边按钮用 fixed 定位 + calc() 垂直居中
固定在视口右侧、垂直居中的按钮，不能靠 margin 或 transform 模拟，否则滚动时会偏移或抖动。必须用 position: fixed 配合 top: calc(50% - 24px)（假设按钮高 48px）直接锚定。
常见错误是写 top: 50%; transform: translateY(-50%) —— 这在 iOS Safari 上偶发失效，且触发重排开销略高；calc() 是更稳定、更轻量的解法。
- 按钮高度需明确（比如
height: 48px），否则calc(50% - Xpx)中的 X 无法确定 - 右侧留白用
right: 16px，别用margin-right（fixed 元素不响应 margin） - 若按钮含图标+文字，建议用
display: flex; align-items: center; justify-content: center居中内容，避免 line-height 误差
移动端点击区域太小？补足可触控最小尺寸
WCAG 和 Apple HIG 都要求可点击区域 ≥ 44×44px。但按钮视觉尺寸常只有 32×32px，直接放大又破坏设计。正确做法是用 ::before 伪元素扩展热区：
button.side-feedback::before {
content: "";
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
z-index: -1;
}这样视觉不变，点击区域扩大 16px，且不影响布局流。
立即学习“前端免费学习笔记（深入）”；
- 别用
padding扩展——会撑大按钮本身，破坏侧边对齐 -
z-index: -1确保伪元素不遮挡按钮文字或图标 - iOS 上若仍点不到，检查是否父容器有
overflow: hidden裁剪了伪元素
按钮悬停/点击态与页面滚动冲突怎么破
侧边按钮常伴随悬浮菜单或弹层，滚动时菜单易错位。根源是 position: fixed 的参照系是视口，而弹层若用 position: absolute，参照的是最近定位祖先——两者坐标系不一致。
统一方案：弹层也用 position: fixed，并用 top/right 精确计算位置，而非依赖 JS 动态算 offsetTop。
- 避免在 scroll 事件里反复调用
getBoundingClientRect()，性能差且易丢帧 - 若必须动态定位（如避开底部 tabbar），用
IntersectionObserver监听视口边界，比 scroll 更高效 - 禁用态（
disabled）要同时加pointer-events: none和opacity: 0.4，否则 fixed 元素可能仍被穿透点击
为什么用 z-index: 9999 还被遮住
不是数字不够大，而是层叠上下文（stacking context）断层了。侧边按钮若嵌套在某个 transform、opacity < 1 或 will-change 的父容器里，会创建新层叠上下文，导致它的 z-index 只在该上下文内生效。
排查步骤：DevTools → Elements → 选中按钮 → Computed → 查看 "Stacking Context" 是否被意外触发。
- 最简解法：把按钮提到
<body>最外层，脱离所有潜在干扰容器 - 若必须保留在 DOM 原位置，给其父级加
transform: translateZ(0)强制创建独立上下文，再设子元素z-index - 不要盲目堆砌
z-index: 999999，超过 2147483647 反而会回绕成负数
侧边反馈按钮真正的难点不在“居中”，而在滚动、缩放、禁用、多层叠加这些状态下的行为一致性——视觉居中只是起点，后续每个交互分支都得单独验证。
