通过结合 position: absolute 与 z-index，可让下拉菜单以覆盖层形式显示在原位置上方，避免重排布局、保持其他内容位置不变。
在网页开发中，常见的“点击展开菜单”需求往往面临一个布局陷阱：若直接用 display: none / display: block 切换元素可见性，元素会从文档流中进出，导致周围内容上下跳动。要实现真正的「悬浮式菜单」——即菜单显示时不占用文档流空间、而是叠加在现有内容之上——关键在于脱离文档流 + 层级控制。
✅ 正确实现方案
1. HTML 结构（保持简洁）
2. 核心 CSS（重点！）
3. JavaScript（优化版，支持 class 切换更语义化）
? 为什么 position: absolute 是关键？ 当元素设为 absolute 后，它将脱离标准文档流，不再影响其他元素的布局位置；其定位参考父级中最近的 position: relative/absolute/fixed 元素（此处是 #menuButton），因此能精准“悬浮”在按钮下方，而不会推挤页面其余内容。
⚠️ 注意事项
- 确保触发按钮（如
- z-index 值需足够高（如 1000），避免被其他组件遮挡；
- 若菜单内容较多或需响应式适配，建议补充 max-height + overflow-y: auto；
- 如需无障碍支持，可添加 aria-expanded 属性同步状态。
✅ 总结
真正解决“不移动内容”的本质，不是修改 JavaScript 逻辑，而是通过 CSS 将菜单从文档流中抽离，并用 z-index 和定位确保视觉层级正确。这种模式广泛应用于导航栏下拉、工具提示（tooltip）、弹出菜单等场景，兼具性能与用户体验优势。
