如何去除抽屉上方的台阶

我在用着DaisyUI and 顺风CSS

我正在使用一个drawer and steps.

<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">
        <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 的抽屉和步骤组件的第一个示例的复制/粘贴。

当我点击“打开抽屉”要打开抽屉，台阶的圆圈仍位于其上方：

如何让抽屉位于台阶圈上方？

这些步骤会扰乱 z-index，从而导致抽屉出现问题，抽屉也依赖于这种机制在顶部绘制。会推荐使用isolation on the steps将 z-index 排序限制在该容器内。 （这可能应该是steps无论如何，类本身。）

这样您就不需要知道正在使用哪些特定索引。

<ul class="steps isolate">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/3.1.7/full.min.css" integrity="sha512-XCyMGudVghtcrEkHUSNd/OvlbxUYXLeI0bYO4jm3Tn1olsupuMnMmRRecHPy0kY/AJI2gc6mTzzCPY5DCsPRCg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<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 isolate">
      <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">
    <label for="my-drawer" class="drawer-overlay"></label>
    <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>