最简方案是按钮用 fixed 定位并设 bottom: 20px、right: 20px 和 z-index: 1000+；徽标需实时同步购物车数据，点击区域不小于 44×44px，面板应预渲染并仅切换显隐状态。
按钮用 fixed 定位 + z-index 控制层级
直接给按钮加 position: fixed 是最简方案，但必须配合 bottom 和 right 偏移，且确保不会被其他元素遮挡。常见错误是只写 position: fixed 却没设具体坐标，结果按钮卡在左上角或不可见位置。
关键参数组合如下：
-
bottom: 20px和right: 20px是移动端和桌面端都较安全的起始值（避开系统状态栏和浏览器 UI） -
z-index: 1000或更高——很多弹窗、导航栏默认 z-index 在 999 以下，不设够高会藏在底下 - 别依赖父容器尺寸：fixed 元素脱离文档流，父级的
overflow: hidden或transform不会影响它
按钮内容要动态更新购物车数量徽标
常驻按钮如果只是静态文字“加入购物车”，就失去意义。真正有用的是右上角带数字徽标的购物车图标，比如 <i class="icon-cart"></i><span class="cart-badge">3</span>。这个数字必须实时反映当前购物车商品总数。
更新逻辑不能只靠 DOM 操作，得和购物车数据源同步：
立即学习“前端免费学习笔记（深入）”；
- 每次调用
addToCart()后，立刻执行updateCartBadge(cartItems.length) - 页面加载时从
localStorage.getItem('cart')读取并解析，再调用一次updateCartBadge() - 徽标元素建议用
data-cart-count属性存原始值，避免只靠textContent解析（比如含单位“3件”就难提取）
移动端点击区域和可访问性不能省略
右下角按钮在 iPhone 上点不准，不是用户手抖，是触控区没达标。WCAG 要求最小点击区域 ≥ 44×44px，而单纯靠 padding 撑开的按钮，若内部是 inline 元素，换行符会引入空白间隙，实际尺寸缩水。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
稳妥做法：
- 按钮本身设
display: inline-flex或display: block，再配min-width: 44px; min-height: 44px; - 图标用
<svg>或字体图标，别用<img>——后者容易因width/height设置不当拉伸变形 - 加上
aria-label="查看购物车，当前有 3 件商品"，屏幕阅读器能读出实时数量 - 禁用状态时，除了
opacity: 0.5，还要设pointer-events: none，防止误触
点击展开购物车面板时的 DOM 插入时机很关键
右下角按钮点击后弹出购物车面板，这个面板不能每次点击都 innerHTML = '...' 重绘——会导致事件监听丢失、动画中断、焦点管理混乱。
更合理的做法是提前在 HTML 底部声明一个隐藏的模板：
<div id="cart-drawer" aria-hidden="true" style="display:none;">
<section aria-label="购物车内容">
<ul id="cart-list"></ul>
<div class="cart-footer"></div>
</section>
</div>
点击按钮时只做三件事：
- 把
aria-hidden="false"和style="display:block"加到#cart-drawer - 调用
renderCartList(cartItems)—— 这个函数用document.createElement批量创建<li>并 append 到#cart-list - 用
focus()把焦点移到面板第一个可聚焦元素（如“去结算”按钮），否则键盘用户无法操作
面板关闭后，不要 remove() 整个节点，保留 DOM 结构，只切 display 和 aria-hidden 状态——下次打开更快，也避免重复绑定事件。
