如何用JavaScript点击切换div显隐且不改变其他内容位置？

要实现菜单显示在其他内容上方且不改变原有布局，核心是通过CSS定位让菜单脱离正常文档流，这样它的显示/隐藏就不会影响其他元素的位置。具体实现步骤如下：

1. 调整HTML结构（可选但推荐） #

给菜单添加一个父容器，方便控制菜单的定位基准：

<!-- 触发按钮 -->
<button onclick="myFunction()">切换菜单</button>
<!-- 菜单父容器 -->
<div class="menu-wrapper">
  <div id="menudesplegable" class="dropdown-menu">
    <!-- 菜单内容示例 -->
    <a href="#">菜单项1</a>
    <a href="#">菜单项2</a>
    <a href="#">菜单项3</a>
  </div>
</div>

<!-- 其他内容 -->
<div class="content">
  <p>这是页面其他内容，菜单显示时不会被向下推移</p>
</div>

2. 添加关键CSS样式 #

通过position: absolute让菜单脱离文档流，配合父容器的position: relative确定定位基准，同时设置z-index确保菜单在其他内容上方：

/* 菜单父容器：设置相对定位，作为子元素绝对定位的基准 */
.menu-wrapper {
  position: relative;
  display: inline-block; /* 避免容器占满整行，跟随按钮宽度 */
}

/* 下拉菜单：默认隐藏，绝对定位 */
.dropdown-menu {
  position: absolute;
  display: none;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  width: 180px;
  z-index: 999; /* 确保菜单在其他内容之上 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 菜单显示时的样式 */
.dropdown-menu.show {
  display: block;
}

/* 示例其他内容样式 */
.content {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
}

3. 修改JavaScript逻辑（更简洁的class切换方式） #

用classList.toggle()替代直接修改style.display，让样式控制完全交给CSS，更符合前端开发规范：

function myFunction() {
  const menu = document.getElementById("menudesplegable");
  menu.classList.toggle("show");
}

原理说明 #

• position: absolute：让菜单脱离正常文档流，不再占用页面空间，自然不会推挤其他元素。
• 父容器的position: relative：确保菜单的定位是相对于父容器（而非整个页面），比如会显示在触发按钮的正下方。
• z-index：设置足够大的值，保证菜单覆盖在其他内容上方，不会被遮挡。

如果你的菜单是全局导航（比如页面顶部的下拉菜单），可以把position: absolute换成position: fixed，这样菜单会相对于浏览器视口定位，滚动页面时也能保持在固定位置。

内容的提问来源于stack exchange，提问作者Daniela Elias