应使用position: fixed而非absolute，因其直接锚定视口、滚动稳定；配合top/right定位、transform: translateY(-50%)垂直居中（不依赖高度、不触发重排），再通过max-width+overflow:hidden实现平滑收缩展开动画，并需兼顾移动端适配、无障碍支持及z-index层级防护。
直接说结论：用 position: fixed + right/top 定位 + transform: translateY(-50%) 垂直居中，再配合 display 切换或 max-width 动画实现收缩展开，不是靠 JS 模拟“滑动”，而是 CSS 控制可见性与尺寸。
为什么用 position: fixed 而不是 absolute
因为悬浮按钮必须随页面滚动始终贴边可见。position: absolute 是相对于最近的定位祖先，一旦页面滚动、祖先高度变化或有 sticky header，按钮就容易错位甚至消失；position: fixed 直接锚定视口（viewport），稳定可靠。
常见错误现象：absolute 下按钮在移动端缩放后偏移、在单页应用路由切换后位置丢失、在有 overflow: hidden 的容器里被裁切。
- 务必设置
z-index: 1000或更高，避免被轮播图、弹窗、广告位遮挡 - 不要依赖父容器做定位基准——父容器可能没有
position: relative，也可能被重置样式干扰 - 移动端需额外加
@media (max-width: 768px)调整right和bottom值，防止遮挡系统返回键或手势区域
transform: translateY(-50%) 垂直居中的实际效果和坑
右侧悬浮时，常希望按钮/面板垂直居中（比如从顶部 50% 开始，自身高度一半向上偏移）。top: 50% + transform: translateY(-50%) 是最稳妥方案，它不依赖元素具体高度，也不触发重排。
立即学习“前端免费学习笔记（深入）”；
但要注意：transform 会创建新的层叠上下文，如果同时用了 z-index，且父级也有 transform，可能导致层级失效。
- 别写成
margin-top: -XXpx—— 高度一变就得手动改，响应式下完全不可维护 - 若内容区域（如二维码面板）也用
transform动画，注意 Safari 旧版本对transform+display: none组合的支持不稳定，建议用visibility: hidden+opacity替代 - 某些 CMS 或框架（如 WordPress Gutenberg 编辑器）会给外层加
transform: translateZ(0)，意外触发层叠上下文，此时需检查 computed style 中的z-index是否生效
收缩展开用 max-width 还是 width？
推荐用 max-width + overflow: hidden 实现平滑伸缩，而不是直接切 width。前者能自然处理内部文字换行、图片加载延迟、字体加载抖动等问题；后者容易导致布局跳动或动画卡顿。
示例关键 CSS：
.wechat-content {
max-width: 0;
overflow: hidden;
transition: max-width 0.3s ease, opacity 0.2s ease;
}
.wechat-widget.active .wechat-content {
max-width: 240px; /* 设为合理最大宽度，别用 100% */
opacity: 1;
}-
max-width必须设具体像素值（如240px），不能用100%，否则动画无效 - 内部
<img>建议加width: 100%和height: auto，防止拉伸变形 - 如果面板含表单或输入框，收缩时要确保
tabindex="-1"或移除焦点，否则键盘用户可能聚焦到不可见区域
移动端点击穿透和可访问性容易被忽略的点
很多实现只考虑鼠标 hover，但 iOS Safari 和安卓 Chrome 在触摸屏上默认不触发 :hover，导致“悬停展开”在手机端失效。必须用 click/tap 事件显式控制状态。
同时，无障碍支持不能只靠视觉状态——aria-expanded、aria-controls、role="button" 这些属性漏掉一个，屏幕阅读器用户就无法感知面板是否打开。
- 按钮必须是
<button>，不是<div>+onclick，否则无法键盘 focus 和 Enter 触发 - 收缩后，隐藏的内容区域要用
hidden属性或aria-hidden="true"，否则仍会被读屏软件朗读 - iOS 上点击小按钮（尤其 padding 扩展，而非仅靠
font-size
