position: fixed 侧边面板贴不紧右边缘的根本原因是父容器创建了新包含块，当最近已定位祖先含有 transform、perspective 或 filter 时，fixed 元素会相对该祖先而非视口定位。
为什么 position: fixed 的侧边面板总贴不紧右边缘？
根本原因不是 right 没写对，而是父容器悄悄创建了新包含块——只要最近的已定位祖先（哪怕只是 div）带 transform、perspective 或 filter，position: fixed 就会放弃视口，转而相对于它定位。
实操建议：
- 把悬浮面板的 DOM 直接挂到
下，绕过所有中间 wrapper - 检查并移除干扰样式：比如
transform: translateZ(0)（常被误用于“硬件加速”）、filter: drop-shadow()、opacity: 0.99 - 用 Chrome DevTools 的 “Layers” 面板确认面板是否意外进了某个合成层
- 必须显式写
right: 0，不能只靠left: auto或省略
移动端点击失效或图标错位怎么修？
iOS Safari 对 position: fixed + 伪元素/内联图标特别敏感，点不中、双击才响应、小屏换行错位，全是常见症状。
实操建议：
- 每个可点击图标必须是
<a></a>或带role="button"和tabindex="0"的<div> <li>触控热区设为至少 <code>44px × 44px：用min-width/min-height，别只靠padding - 加
touch-action: manipulation（注意：若内部需垂直滚动，改用pan-y） - 图标容器用
display: inline-flex+gap，不用margin控制间距，避免累积误差 - 尺寸统一用
rem（如width: 1.5rem），禁用user-scalable=no在 viewport 中 - 侧边栏自身设
display: flex+flex-direction: column+justify-content: center - 但更稳的做法是：设
top: 50%+right: 24px（留安全边距），再加transform: translateY(-50%) - 务必给侧边栏设
width: max-content或固定值（如width: 48px），否则可能撑出水平滚动条 - 安卓横屏切换时位置不重绘？加
will-change: transform强制触发重绘（慎用，仅在必要时） - 所有外链必须带
target="_blank"，否则默认在当前页打开 - 必须加
rel="noopener noreferrer"，否则新页面能通过window.opener反向控制原页，有安全风险 - 微信客户端唤起要用
weixin://协议（仅限微信内），网页端必须降级为二维码浮层，不能只放一个<a href="weixin://..."></a> - 遮罩层弹出后，除了
body.no-scroll { overflow: hidden }，还得在遮罩上监听touchmove并preventDefault()，否则 iOS 上仍可滚动背景
如何让图标组真正垂直居中且不随滚动条偏移？
top: 50% + transform: translateY(-50%) 是唯一可靠方案。仅靠 align-items 或 margin: auto 在 fixed 元素上基本无效，因为它的 flex 主轴长度不可知。
实操建议：
微信分享按钮点开后页面跳转或弹窗被拦截？
这不是 CSS 问题，但常和悬浮面板绑在一起出错。用户一点击就刷新当前页，或分享弹窗被浏览器拦掉，根源在 HTML 层缺失关键属性。
实操建议：
position: fixed，而是判断它到底相对于谁在定位——有时候你改了十次 CSS，不如把 DOM 拉到 
