必须用 position: fixed。因 sticky 只在父容器内粘滞且不脱离文档流，无法实现视口级悬浮；fixed 以视口为基准，配合 top: 50% 和 transform: translateY(-50%) 才能垂直居中。
侧边栏社交工具条用 position: fixed 还是 position: sticky？
固定在视口右侧、随滚动始终可见的社交栏，必须用 position: fixed。用 sticky 会随页面滚动消失——它只在父容器内“粘”，不脱离文档流，无法实现真正意义上的“悬浮侧边”。fixed 的定位基准是视口，配合 top: 50% 和 transform: translateY(-50%) 才能精准垂直居中。
Flex 垂直居中时为什么 align-items 不起作用？
因为 fixed 元素默认不继承父容器的 Flex 上下文。你不能指望把侧边栏塞进某个 flex 容器里再靠 align-items 居中——它已经脱离了那个流。正确做法是让侧边栏自己成为 flex 容器，并用 flex-direction: column + justify-content: center 居中内部图标；但更轻量、更可控的方式是：直接在侧边栏上设 display: flex、flex-direction: column，然后对子元素（每个社交图标）用 margin: auto 实现单个居中，或用 justify-content: center 批量居中。
-
justify-content: center仅在flex-direction: column下控制垂直方向 - 若子项高度不固定，
margin: auto更可靠（尤其兼容老版 Safari） - 别忘了设
height: 100vh或显式高度，否则 flex 无主轴长度可参考
如何避免社交图标被截断或错位？
常见问题是图标溢出视口右边缘，或因 right: 0 + 宽度未约束导致水平滚动条。关键控制点有三个：
- 给侧边栏设
width: max-content或固定值（如width: 48px），避免撑开 - 用
right: 24px替代right: 0，留出安全边距 - 每个图标用
width: 36px、height: 36px+border-radius: 50%统一尺寸，再套margin: 8px 0控制间距 - 务必加
box-sizing: border-box，否则 padding/border 会额外增加宽度
如果图标用 <svg></svg>，记得设 width/height 属性而非 CSS，防止缩放失真。
移动端适配时哪些样式必须加？
小屏下侧边栏容易遮挡内容或点击困难。不要只靠媒体查询隐藏，而是分层响应：
- 小于 768px 时，用
@media (max-width: 767px)将display改为none—— 比缩放更省资源 - 若需保留，改用
right: 12px+width: 36px，图标缩到 28px - 加
pointer-events: none到外层容器，再对每个图标单独设pointer-events: auto，避免误触穿透 - 安卓 WebView 中
transform: translateY(-50%)可能渲染错位，可补will-change: transform
最常被忽略的是 z-index：社交栏必须高于所有内容，但又不能高过弹窗类组件，建议设 z-index: 1030（避开 Bootstrap 的 1050+ 和基础层 1000）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
