通过结合 position: absolute 与 z-index，可让下拉菜单以覆盖层形式显示在原位置上方，避免推挤其他内容；配合 JavaScript 控制显隐，实现流畅、无位移的交互效果。
要实现“点击切换显示/隐藏且不移动下方内容”的菜单效果，核心在于改变元素的定位方式，而非仅依赖 display: none/block。默认情况下，display: none 会完全移除元素的文档流占位，而 display: block 则使其重新参与布局，自然导致页面重排（reflow）——这正是你观察到“内容被往下推”的根本原因。
✅ 正确解法是：将菜单容器设为 脱离文档流的绝对定位（position: absolute），并确保其拥有足够高的 z-index 以浮于其他内容之上。此时，无论 display 值如何变化，它都不会影响周围元素的布局位置。
以下是完整、可直接运行的实现方案：
立即学习“Java免费学习笔记（深入）”；
这段文字的位置始终保持不变，无论菜单是否展开。
? 关键要点说明：
- ✅ #menuButton 设为 position: relative，使内部 #menudesplegable 的 top: 100% 能精准相对于按钮底部定位；
- ✅ #menudesplegable 使用 position: absolute 后，不再占据文档流空间，因此显示/隐藏均不会引起重排；
- ✅ z-index: 1000 确保菜单始终浮于页面其他内容之上（注意：父级若含 transform 或 opacity
- ⚠️ 若菜单内容较多或需响应式适配，建议进一步添加 max-height + overflow-y: auto 或使用 CSS transitions 实现淡入/滑动动画（需改用 visibility + opacity 或 max-height 配合 transition）。
此方案简洁、兼容性好（支持所有现代浏览器及 IE11+），无需第三方库，是实现轻量级悬浮菜单的推荐实践。
