Bulma模态卡片内下拉框被主体遮挡的CSS修复方案咨询

问题原因 #

调整z-index无效的核心原因是：设置了overflow-y: scroll/auto的.modal-card-body会形成滚动裁剪上下文，所有超出该容器边界的后代元素都会被强制裁剪，这个规则不受子元素z-index属性影响，所以单独调高下拉框的z-index无法突破父容器的裁剪限制。

可用修复方案 #

方案1：轻量无侵入（适合下拉触发按钮在模态框上半区） #

直接给dropdown元素添加Bulma原生的is-up修饰符，让下拉框向上展开，不会超出模态框主体底部边界，不需要修改任何CSS：

<div class="dropdown is-active is-up">
  <!-- 原有下拉框内容 -->
</div>

方案2：纯CSS修改定位上下文（适合固定位置的单个下拉框） #

通过修改定位规则，让下拉框脱离.modal-card-body的裁剪范围：

/* 让dropdown不成为定位上下文 */
.modal-card-body .dropdown {
  position: static;
}
/* 让modal-card作为下拉框的定位参考 */
.modal-card {
  position: relative;
}
/* 调整下拉框层级和位置，位置值根据你的触发按钮实际位置微调即可 */
.modal-card-body .dropdown-menu {
  z-index: 40;
  left: 20px; /* 对齐你的触发按钮左边距 */
  top: 100px; /* 对齐你的触发按钮底部位置 */
}

方案3：JS动态挂载（兼容性最好，适合多下拉框场景） #

下拉框展开时，将dropdown-menu节点动态移动到.modal根节点下（而非保留在.modal-card-body内），同时通过JS计算触发按钮的视口坐标，设置下拉框的top、left属性和触发按钮对齐，关闭时再将节点放回原位置。该方案完全脱离了滚动容器的裁剪限制，适配所有场景。

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