纯CSS/HTML下拉菜单展开时推送页面内容问题求助

问题 #

用纯CSS/HTML实现的下拉菜单，点击展开时会将页面其余内容向下推送，尝试调整position和z-index属性后仍未解决。

核心修复思路 #

让下拉选项脱离文档流（使用绝对定位），同时固定下拉容器的高度，避免容器高度变化带动页面布局偏移。

修改后的CSS代码 #

.menu-select {
  position: relative;
  /* 移除overflow:hidden，避免截断绝对定位的选项 */
  /* overflow: hidden; */
  display: block;
  margin: auto;
  width: 200px;
  /* 固定高度，和placeholder/title的高度匹配（1.5em上下padding+border） */
  height: 54px;
  border-bottom: 0px;
  border-radius: 3px;
  font-size: 12px;
  /* 确保下拉菜单在页面内容上方 */
  z-index: 10;
}

.menu-select:not(:hover)>i.toggle.icon-arrow-down {
  display: block !important;
}

.menu-select:not(:hover)>i.toggle.icon-arrow-up {
  display: none !important;
}

.menu-select:not(:hover) label.option>input:not(:checked)~span.title {
  display: none !important;
}

.menu-select>i.toggle {
  position: absolute;
  z-index: 4;
  right: 1.5em;
  top: 1.6em;
  color: #ccc;
}

.menu-select .title,
.menu-select .placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.5em 2em;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.menu-select>input {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: pointer;
}

.menu-select>input:checked~i.toggle.icon-arrow-down {
  display: none;
}

.menu-select>input:checked~i.toggle.icon-arrow-up {
  display: block;
}

.menu-select>input:checked div.options label.option .title {
  display: none !important;
}

.menu-select>input:not(:checked) {
  z-index: 4;
}

.menu-select>input:not(:checked)~label.option>span.title {
  display: none;
}

.menu-select>input:not(:checked)~i.toggle.icon-arrow-up {
  display: none;
}

.menu-select>input:not(:checked)~i.toggle.icon-arrow-down {
  display: block;
}

.menu-select>input:disabled {
  cursor: no-drop;
}

.menu-select>span.placeholder {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  color: #999;
  border-top: 0px;
}

.menu-select label.option {
  display: block;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  transition: all 1s ease-out;
  /* 修改：绝对定位，脱离文档流 */
  position: absolute;
  top: 100%;
  left: 0;
  /* 背景色覆盖下方内容 */
  background: #fff;
}

.menu-select label.option span.title {
  position: relative;
  z-index: 2;
  transition: background 0.3s ease-out;
}

.menu-select label.option span.title i.icon {
  padding-right: 8px;
  color: #92a8d1;
}

.menu-select label.option span.title:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}

.menu-select label.option input {
  display: none;
}

.menu-select label.option input:checked~span.title {
  position: absolute;
  display: block;
  z-index: 3;
  top: 0px;
  font-size: 12px;
  background: #fff;
  border-top: 0px;
  box-shadow: none;
  color: inherit;
  width: 100%;
  height: min-content;
}

.menu-select label.option input:disabled~span.title {
  background: #f9f9f9 !important;
  color: #aaa;
}

.menu-select label.option input:disabled~span.title:hover {
  color: #aaa;
  background: none;
  cursor: no-drop;
}


/* Styling of the icons */

.status-circle-on {
  color: #4bb543;
}

.status-circle-paused {
  color: #f0ad4e;
}

.status-circle-off {
  color: #d9534f;
}

修改说明 #

1. 固定.menu-select的高度：原代码使用height:100%会随下拉选项展开而拉伸容器高度，改成固定值后，容器高度不再变化，不会推动下方内容。
2. 移除overflow:hidden：原属性会截断绝对定位的下拉选项，移除后才能正常显示展开的菜单。
3. 给label.option添加绝对定位：将选项设置为position:absolute并通过top:100%定位在容器下方，脱离文档流后不会占用页面空间，自然不会推送其他内容。
4. 添加z-index和背景色：确保下拉菜单在页面其他内容上方，背景色避免和下方内容重叠显示。

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