DaisyUI与TailwindCSS中Drawer侧边栏被Collapse遮挡无法交互的修复咨询

我正在使用DaisyUI和TailwindCSS，同时用到了Drawer组件和带复选框的Collapse组件。以下是直接从官方示例复制的代码：

<div class="drawer">
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
        <!-- Page content here -->
        <label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
        <div class="collapse bg-base-200">
            <input type="checkbox" />
            <div class="collapse-title text-xl font-medium">Click me to show/hide content</div>
            <div class="collapse-content">
                <p>hello</p>
            </div>
        </div>
    </div>
    <div class="drawer-side">
        <label for="my-drawer" class="drawer-overlay" />
        <ul class="menu p-4 w-80 h-full bg-base-200 text-base-content">
            <!-- Sidebar content here -->
            <li><a>Sidebar Item 1</a></li>
            <li><a>Sidebar Item 2</a></li>
        </ul>
    </div>
</div>

打开Drawer后，侧边栏中与Collapse可点击区域重叠的项（比如示例中的“Sidebar Item 2”）无法进行悬停、点击等交互，只有上方的项正常。

这个问题的核心是Collapse的隐藏复选框（或其关联的交互区域）层级高于Drawer侧边栏，导致事件被Collapse元素拦截。以下是两种可行的修复方法：

方法1：提升侧边栏的层级 #

直接给Drawer侧边栏添加更高的z-index，确保它在Collapse元素之上：

<div class="drawer-side z-[100]">
    <label for="my-drawer" class="drawer-overlay" />
    <ul class="menu p-4 w-80 h-full bg-base-200 text-base-content">
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
    </ul>
</div>

这里使用z-[100]是因为默认情况下Collapse相关元素的层级较低，这个数值足够覆盖。如果还是有问题，可以尝试更大的数值。

方法2：调整Collapse的交互范围 #

如果可以接受仅通过标题触发折叠，可将Collapse的复选框移至标题内部，缩小交互区域，避免覆盖侧边栏：

<div class="collapse bg-base-200">
    <div class="collapse-title text-xl font-medium cursor-pointer">
        <input type="checkbox" class="sr-only peer" />
        Click me to show/hide content
    </div>
    <div class="collapse-content peer-checked:block hidden">
        <p>hello</p>
    </div>
</div>

这种方式需要用Tailwind的peer和peer-checked类来关联复选框状态与内容的显示/隐藏，确保折叠功能正常。

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