position: fixed 是实现侧边浮动按钮的唯一合理起点，因其能真正锚定视口边缘、保持滚动可见、保障焦点与可访问性；float 会导致脱离文档流后错位、塌陷及键盘导航失效，absolute 则无法随视口固定。
position: fixed 是实现侧边浮动栏的唯一合理起点，其他方案（比如 float 或 position: absolute）在滚动、焦点、可访问性上都会出问题。按钮本身要极简，就不能靠复杂嵌套或 JS 驱动——得用原生语义 + 最少 CSS 控制行为和状态。
为什么不能用 float 布置侧边浮动按钮
浮动会让按钮脱离文档流，但又不真正“固定”：一滚动就消失，且无法锚定到视口边缘；更麻烦的是，float 依赖父容器清除浮动，而浮动按钮常被塞进 aside 或 nav 里，这些语义容器默认不设 overflow，结果就是按钮位置飘、父容器塌陷、键盘 Tab 焦点乱跳。
常见错误现象：button 在滚动后错位、按 Tab 键时直接跳过整个区域、屏幕阅读器读不出它的功能。
position: fixed 的正确写法与避坑点
必须同时指定 top 和 right（或 left），否则 Safari 下可能偏移；用 transform: translateY(-50%) 居中，别依赖 top: 50% 加 margin-top: -Xpx——按钮高度未知时会失效。
关键参数差异：
-
z-index: 1000必须显式设置，否则可能被模态框、广告位遮盖 - 避免给父容器加
transform或will-change，否则会切断position: fixed的视口锚定 - 移动端 iOS Safari 对
fixed在overflow-scroll区域内支持不稳定，若主内容区有overflow: hidden或-webkit-overflow-scrolling: touch，按钮可能“粘住不动”
极简按钮 HTML 结构与 ARIA 必填项
不要用 div 模拟按钮，必须用原生 button；如果它控制侧边栏展开/收起，就得同步管理状态属性：
示例结构：
<button type="button" aria-expanded="false" aria-controls="sidebar-nav" class="side-toggle"> ☰ </button>
说明：
立即学习“前端免费学习笔记（深入）”；
-
aria-expanded和aria-controls必须成对出现，否则屏幕阅读器无法建立关联 - 图标用 Unicode（如
☰）或伪元素::before，别写死<img>或内联 SVG——影响主题切换和高对比度模式 - 禁用
display: none切换按钮显隐；真要隐藏，用visibility: hidden; position: absolute; clip: rect(0 0 0 0)保焦点可抵达性
主内容区如何避让浮动按钮（不是靠 JS）
很多人用 JS 动态改 body.style.paddingRight，但断点切换时极易错乱；更稳的方式是纯 CSS 计算：
如果按钮宽 48px、距右 20px，则主内容右侧需留出至少 68px 空间：
main {
padding-right: calc(48px + 20px);
}
但注意：这个值必须和按钮的 right 值严格一致，否则小屏下重叠或留白过大；响应式时建议用 @media 单独覆盖，而不是靠 JS 监听 resize——后者在快速拖拽窗口时会丢帧，造成视觉闪跳。
aria-expanded、DOM 可见性、CSS 过渡、焦点管理这四者是否同步更新——漏掉任意一个，用户就会卡在“看不见却按得到”的状态里。 
