无JS实现弹出动画菜单与标签重叠效果的CSS解决方案

问题核心原因 #

菜单盖在label上方、z-index调整无效的核心问题是层叠上下文逻辑和定位属性设置冲突：

• 展开状态的菜单元素.mblock被设置为position: initial，脱离了绝对定位层叠约束，同时设置了z-index: 1，而label标签没有建立更高层级的层叠上下文，自然会被菜单覆盖
• 渐变背景场景下不需要新增额外DOM元素做遮挡，只要调整定位逻辑和层叠顺序就能实现预期效果。

具体修改点 #

仅需调整CSS代码，无需改动原有HTML结构：

1. 给.taber（即label标签）设置和页脚一致的渐变背景，添加position: relative和更高的z-index，确保它始终处于菜单上层
2. 移除展开态.mblock的position: initial设置，始终保留绝对定位，通过调整transform和top值实现滑入滑出动画，避免定位属性切换导致的层叠混乱
3. 给隐藏状态的.mblock添加pointer-events: none，避免隐藏状态下拦截点击事件
4. 给菜单和label的共同父容器设置相对定位，作为菜单绝对定位的参考系，确保动画位移方向符合预期

修正后完整代码 #

CSS部分 #

@media (max-width:992px) {
  footer {
    line-height: 2.2
  }
  /* 新增：给label和菜单的共同父容器设置相对定位，作为定位参考 */
  footer input + div {
    position: relative;
  }
  .taber {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 5px;
    position: relative;
    /* 和页脚一致的渐变背景，遮挡菜单时和整体背景自然融合 */
    background: linear-gradient(180deg, blue,#003);
    /* 设置更高层级，始终盖在菜单上方 */
    z-index: 3;
  }
  .taber:after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    top: 12px;
    right: 5px;
    transition: transform .5s
  }
  .taber {
    cursor: pointer
  }
  footer :checked+div .mblock {
    visibility: visible;
    z-index: 1;
    transform: translateY(0);
    top: 100%;
    transition: transform .5s;
    pointer-events: auto;
  }
  footer .mblock {
    position: absolute;
    width: 100%;
    overflow: hidden;
    visibility: hidden;
    z-index: 1;
    top: 100%;
    transform: translateY(-100%);
    transition: transform .5s;
    pointer-events: none;
  }
   :checked+div .taber:after {
    transform: rotateZ(135deg)
  }
}

.top {
  overflow: hidden;
  z-index: 2;
  position: relative
}

.bg-gradient-inv {
  background: linear-gradient(180deg, blue,#003);
}

footer {
  background: #003;
  color: white
}

.tr {
  color: white
}

.hide {
  display: none
}

HTML部分（原有结构仅修正多余闭合标签，无需其他改动） #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

点击页脚区域可复现问题
<br> 更多正文内容
<footer class="pt-4 px-4 pb-5 pt-5 bg-gradient-inv">
  <div class=container>
    <div class=row>
      <div class="col-12 col-lg-2 top">
        <input class="hide" type="checkbox" id="f1">
        <div>
          <div class="col-12 top"><label class="small nw tr taber pt-2 d-block" for=f1>Footer</label></div>
          <div class=mblock>
            <div class="col-12"><a class="small nw tr d-block" href=/>1</a></div>
            <div class="col-12"><a class="small nw tr d-block" href=/>2</a></div>
            <div class="col-12"><a class="small nw tr d-block" href=/>3</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>

效果说明 #

修改后菜单初始状态完全隐藏在label后方，点击展开时会平滑滑落到label下方，label始终盖在菜单上层；因为label本身使用和页脚完全一致的渐变背景，遮挡菜单边缘时不会出现色块断层，不需要额外添加遮挡元素，全程无JS实现动画效果。

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