如何实现下拉菜单展开时向下推动下方div而非重叠

核心问题原因 #

下拉菜单重叠的根本原因是.dropdown-content设置了position: absolute，完全脱离了正常文档流，展开时不会占用父容器高度，自然无法推动下方元素下移。同时你给上下容器设置的height:100%、top:5rem属于多余属性，也会干扰布局计算。

修改方案 #

只需调整3处CSS规则即可实现需求：

• 移除.dropdown-content的position: absolute属性，让下拉内容回归正常文档流，展开时自动撑开父容器高度，推动下方元素下移
• 移除.dropContainer的height: 100%属性，让容器高度由内部内容自动计算
• 移除.inputContainer的height: 100%和top: 5rem属性，消除无效属性对布局的干扰

修改后完整CSS代码 #

.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.dropContainer{
  display: block;
  margin-bottom: 2rem;
}

.inputContainer{
  display: block;
}


 /* dropDown Menu */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  background-color: #f1f1f1;
  min-width: 160px;
  padding-bottom: 140px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {display: block; }

调整完成后，下拉菜单展开时下方输入区域会自动向下移动，不会出现重叠，收起时也会自动复位，原有交互逻辑无需修改。

内容的提问来源于stack exchange，提问作者Peace Brother Peace