DaisyUI折叠面板内下拉菜单被容器遮挡问题求助

算力阿峰

2026-7-3

问题描述

首次使用DaisyUI，遇到折叠面板（collapse）内的下拉菜单（dropdown）被遮挡的问题：

下拉菜单无法完整显示，被折叠面板内容区域遮挡
尝试设置z-[99]无效，加!important会撑开折叠面板容器
调整overflow属性未解决

问题截图：
下拉菜单被折叠面板遮挡

示例代码：

<div
  tabindex="0"
  class="collapse collapse-open border border-base-300 bg-red-200"
>
  <div class="collapse-title text-xl font-medium">
    I have collapse-open class
  </div>
  <div class="collapse-content">
    <details class="dropdown">
      <summary class="m-1 btn">open or close</summary>
      <ul
        class="p-2 shadow menu dropdown-content z-[99] bg-base-100 rounded-box w-52"
      >
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
      </ul>
    </details>
  </div>
</div>

解决方案

为啥会出现这个问题？因为DaisyUI的collapse-content默认加了overflow: hidden，下拉菜单被折叠面板的内容区域框死了，就算调z-index也没用。按下面两步改就行：

让折叠面板内容区域不裁剪超出部分
给collapse-content加个overflow-visible类，取消默认的隐藏限制：

<div class="collapse-content overflow-visible">

让下拉菜单脱离折叠面板的上下文
把dropdown-content的默认相对定位改成fixed，这样菜单就能飘在外面，再保留z-[99]确保层级够高不会被其他元素盖住：

<ul
  class="p-2 shadow menu dropdown-content fixed z-[99] bg-base-100 rounded-box w-52"
>

如果菜单位置歪了，补个小调整
改成fixed后要是菜单位置不对，给dropdown加个dropdown-end之类的定位类，或者写几行自定义CSS微调：

.dropdown-content.fixed {
  top: auto;
  bottom: 100%;
  left: 0;
}

修改后的完整代码：

<div
  tabindex="0"
  class="collapse collapse-open border border-base-300 bg-red-200"
>
  <div class="collapse-title text-xl font-medium">
    I have collapse-open class
  </div>
  <div class="collapse-content overflow-visible">
    <details class="dropdown">
      <summary class="m-1 btn">open or close</summary>
      <ul
        class="p-2 shadow menu dropdown-content fixed z-[99] bg-base-100 rounded-box w-52"
      >
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
      </ul>
    </details>
  </div>
</div>

内容的提问来源于Stack Exchange，提问作者James K.