用 position: fixed 实现左侧垂直悬浮栏需设 left/top 定位、z-index≥100、top: 50%+transform 居中，禁用 width/height: 100%，按钮竖排用 flex-column 或 margin-bottom，移动端用 media query 隐藏，确保 href 和 aria-label 等无障碍支持。
用 position: fixed 实现左侧垂直悬浮栏
固定在视口左侧的社交按钮栏，核心就是脱离文档流并锚定坐标。直接给容器设 position: fixed，再用 left 和 top 定位——但注意，left: 0 会紧贴浏览器最左边缘，实际常需留出一点间隙（比如 left: 20px），否则可能被滚动条遮挡或显得太挤。
常见错误是忘记设置 top 值，导致按钮堆在顶部不可见；或者用了 position: absolute 却没给父容器加 position: relative，结果定位失效。
- 容器必须设
z-index（建议 ≥ 100），否则可能被轮播图、弹窗等盖住 - 高度方向推荐用
top: 50%+transform: translateY(-50%)垂直居中，比手动算高度更可靠 - 避免设
width: 100%或height: 100%，这会让它撑满整个视口，失去“栏”的形态
按钮竖排布局与间距控制
垂直排列靠的是块级元素默认行为，但必须确保每个按钮是 display: block 或用 flex-direction: column。单纯用
<br>换行是反模式，响应性差且难以维护。
间距推荐用 margin-bottom（最后一个按钮设 margin-bottom: 0）或 gap（配合 display: flex; flex-direction: column）。别用 padding 撑开整体容器，那会把空白也变成可点击区域。
- 图标用 SVG 内联或
background-image更可控，比<img>标签少一次 HTTP 请求，缩放也不模糊 - 每个按钮的
width应统一（如40px），height保持一致，避免视觉跳跃 - 悬停效果用
:hover加transition: all 0.2s ease，但别对transform外的属性做过渡（如width），性能差
移动端适配：何时隐藏、如何简化
手机屏宽度下，左侧固定栏不仅没空间，还会遮挡内容。必须用媒体查询主动隐藏：@media (max-width: 768px) { .share-bar { display: none; } }。别指望用户“习惯”它，小屏上它就是干扰项。
如果业务强依赖分享，可改为底部浮动按钮（position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%)），或集成进文章末尾的分享模块，而不是硬塞左侧。
- 不要用 JavaScript 动态判断屏幕尺寸来 toggle 显示——CSS 媒体查询更轻量、更可靠
- 隐藏时确保不占 DOM 流（用
display: none，而非visibility: hidden或opacity: 0） - 若需保留基础功能，可只显示一个「分享」文字按钮，点开再展开平台列表，减少初始体积
无障碍与 SEO 注意点
这些按钮本质是外链，但搜索引擎不抓取 JS 生成的内容，所以所有 a 标签必须写死 href（哪怕只是跳转到分享 URL），不能靠 onclick 拼接。否则 Google 可能认为页面缺乏有效外链。
屏幕阅读器需要知道这是什么。每个按钮加 aria-label（如 aria-label="分享到微信"），容器加 role="region" 和 aria-label="社交分享工具栏"。
- 禁用
target="_blank"时不加rel="noopener"—— 这是安全漏洞，必须补上 - 图标无文字时，
alt=""对<img>是错的，应删掉alt属性或用aria-hidden="true" - 避免用纯 CSS 伪元素（
::before）画图标却不提供文本替代，这对读屏软件不可见
最易被忽略的是 z-index 层级冲突和移动端默认隐藏逻辑——这两个点一旦漏掉，上线后要么看不见，要么点不了，排查起来反而比写代码花时间更多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
