如何实现Div叠加？解决下拉菜单被主Div遮挡的问题

兄弟，我太懂这种下拉菜单被挡住的憋屈感了！这问题大概率是层级（z-index）和定位没搞对，给你几个靠谱的解决办法：

1. 先给下拉菜单加定位属性 #

z-index 只对设置了 position: relative/absolute/fixed/sticky 的元素生效，如果你的下拉菜单没加定位，就算设了z-index也白搭。比如给下拉容器加个基础定位：

.dropdown {
  position: relative; /* 保证z-index能正常生效 */
}

如果是下拉展开的子菜单内容，通常用绝对定位让它脱离文档流，避免影响其他布局：

.dropdown-content {
  position: absolute; /* 让菜单浮在其他元素上方 */
  top: 100%; /* 贴紧父按钮的下方 */
  left: 0;
  /* 可补充其他样式：比如背景色、宽度、边框等 */
}

2. 调高下拉菜单的z-index层级 #

给下拉菜单设置比主Div更高的z-index值，确保它能“跳”到主Div上面：

/* 主Div如果没设置z-index，默认是0，所以下拉菜单设个大点的数值就行 */
.dropdown-content {
  z-index: 999; /* 这个值只要比主Div的z-index大就可以 */
}

要是你的主Div（比如#navbar-wrap）自己设置了z-index，那下拉菜单的z-index得比这个值更高才行——比如主Div设了z-index: 10，下拉就设z-index: 20。

3. 检查主Div的overflow设置 #

如果主Div（或者它的父容器）加了overflow: hidden，那下拉菜单会被直接裁剪掉，这时候得把overflow改成visible：

#navbar-wrap {
  overflow: visible; /* 去掉隐藏溢出，让下拉菜单能完整显示 */
}

额外注意点 #

• z-index是“相对父元素”生效的：如果下拉菜单的父容器z-index比其他元素低，那子菜单z-index再高也没用，得确保父容器的层级也足够。
• 别给所有元素乱加z-index，不然容易搞出其他层级问题，够用就行。

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