用 checkbox 控制气泡菜单更轻量，因无需 JS 监听、不触发重排、无 JS 依赖；核心是 :checked 伪类配合相邻/子元素选择器，且 input 必须位于 label 和菜单之前，禁用 display: none 改用 opacity: 0 等隐藏。
用 input[type="checkbox"] 控制气泡菜单显隐，为什么比 JS 更轻量？
因为不需要监听点击、不触发重排、无 JS 依赖，适合静态页或对首屏性能敏感的场景。核心是利用复选框的 :checked 伪类 + 相邻/子元素选择器联动显示隐藏。
-
input[type="checkbox"]必须放在label或菜单容器之前（HTML 顺序决定 CSS 可控范围） - 不能用
display: none隐藏复选框，否则 iOS Safari 会跳过焦点和状态更新；改用position: absolute; opacity: 0; pointer-events: none; - 气泡菜单本身要用
position: absolute，父容器必须设position: relative，否则定位会脱出预期区域
气泡菜单定位总偏移、贴不到触发点？检查这三处
常见现象是菜单浮在左上角、或水平错位几十像素——基本不是 CSS 写错了，而是定位上下文没理清。
- 触发按钮（
label）父级是否意外设置了transform？有则会创建新定位上下文，导致position: absolute相对于它计算，而非视口 - 菜单的
top/left值是否写死了像素？应优先用top: 100%+margin-top: 4px实现紧贴按钮下沿 - 如果按钮是行内元素（如
span），需确认它是否被设了vertical-align: middle等，这会影响基线位置，间接干扰top: 100%的起始点
:checked ~ .bubble-menu 不生效？这些选择器限制得记牢
CSS 无法跨层级“向上找”或“向后找任意位置”，~ 和 + 都有严格路径约束。
-
~只匹配**同级后续兄弟元素**，且必须在同一个父容器内；如果菜单放在按钮外层 div 里，就完全选不到 - 想支持更灵活结构？只能把复选框、按钮、菜单全塞进同一个父容器，例如：
<div class="dropdown"> <input type="checkbox" id="menu-toggle"> <label for="menu-toggle">●</label> <div class="bubble-menu">...</div> </div>
- 别用
:checked + .bubble-menu试图直接选中菜单——除非菜单紧跟在input后面，但这样语义混乱，可访问性差
移动端点击失效、闪退、或连点两次才响应？
iOS Safari 对 label for 的点击响应有延迟，且复选框状态切换可能被浏览器优化掉。
立即学习“前端免费学习笔记（深入）”；
- 给
label加cursor: pointer和-webkit-tap-highlight-color: transparent，避免点击反馈遮挡 - 菜单容器加
will-change: transform或transform: translateZ(0)，防止 Safari 渲染异常导致闪退 - 禁止用户连续快速点击：用
pointer-events: none在:checked状态下临时禁用label，再配合 transition 结束后恢复
:checked 的微妙处理节奏。 
