如何让DaisyUI抽屉组件覆盖步骤组件的圆形元素？

嘿，这个问题我之前也碰到过！本质上是DaisyUI的Steps组件里的圆形指示器默认有较高的z-index，导致抽屉打开后被压在这些圆形元素下面了。

解决方法很简单，只需要给抽屉的侧边栏（drawer-side）设置一个足够高的z-index值，让它能覆盖在Steps组件上方就行。

你可以直接在drawer-side的class里添加Tailwind的自定义z-index类，比如z-[100]，修改后的代码如下：

<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>
    <ul class="steps">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Choose plan</li>
      <li class="step">Purchase</li>
      <li class="step">Receive Product</li>
    </ul>
  </div>
  <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">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>

为什么这么做呢？因为DaisyUI的step元素默认的z-index通常在20左右，我们设置z-[100]可以确保抽屉侧边栏的层级完全高于它，这样打开抽屉时就不会再出现圆形元素露在外面的情况了。

如果你觉得z-[100]太夸张，也可以先尝试z-50（Tailwind的默认高z-index类），如果不行再往上调就行，核心就是让抽屉的层级比Steps的圆形元素高。

备注：内容来源于stack exchange，提问作者Valentin Vignal