当 DaisyUI 的 dropdown 嵌套在 collapse 组件中时，下拉菜单常因父级 overflow: hidden 被截断；只需覆盖 collapse 的溢出行为为 visible 即可使下拉层正常显示于容器之外。
当 daisyui 的 dropdown 嵌套在 collapse 组件中时，下拉菜单常因父级 `overflow: hidden` 被截断；只需覆盖 collapse 的溢出行为为 `visible` 即可使下拉层正常显示于容器之外。
DaisyUI 的 .collapse 组件默认设置了 overflow: hidden（用于平滑动画和内容收起时的视觉控制），这会导致其内部的 dropdown-content（定位为 position: absolute）被强制裁剪——即使已设置高 z-index，也无法突破该溢出限制。
根本解法：解除 overflow 隐藏
关键在于让 collapse 容器允许子元素“溢出显示”。DaisyUI 提供了实用类 !overflow-visible（带 !important 的 Tailwind 工具类），可直接覆盖默认样式：
<div tabindex="0" class="collapse collapse-open border border-base-300 bg-red-200 !overflow-visible">
<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>
<!-- 更多选项... -->
</ul>
</details>
</div>
</div>✅ 为什么 z-index 无效？
因为 z-index 仅在同层叠上下文（stacking context）内生效；而 overflow: hidden 会创建新的层叠上下文，将 dropdown-content “锁”在其内部，外部 z-index 无法穿透。
⚠️ 注意事项
- !overflow-visible 是最简洁可靠的方案，无需额外 CSS 或 JS；
- 避免滥用 !important —— DaisyUI 明确为此类交互场景提供了该工具类，属官方推荐用法；
- 若需动态控制（如仅在 dropdown 展开时解除 overflow），可通过 JS 切换 overflow-visible 类，但静态场景下直接添加即可；
- 确保 dropdown-content 仍保有 z-[99] 或更高值（如 z-[100]），以避免与其他绝对定位元素冲突。
此方案兼容 DaisyUI v4+ 与 Tailwind CSS 3.3+，无需修改框架源码，轻量、稳定且符合原子化 CSS 最佳实践。
