css 如何从抽屉上方移除台阶

6ie5vjzr 于 2023-07-01 发布在其他

关注(0)|答案(2)|浏览(92)

我使用DaisyUI和TailwindCSS
我使用的是drawer和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中drawer和steps组件的第一个示例的复制/粘贴。

当我点击 “OPEN DRAWER” 打开抽屉时，步骤的圆圈仍在其上方：

如何使抽屉在台阶上？

css

来源：https://stackoverflow.com/questions/76590507/how-to-remove-steps-from-being-over-the-drawer

2条答案

按热度按时间

sulc1iza1#

考虑通过z-10实用程序类将z-index: 10应用于.drawer-side元素，从而增加.drawer-side元素的z堆栈位置：

<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">
      <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-10">
    <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>

赞(0）回复(0）举报 2023-07-01

ki1q1bka2#

这些步骤扰乱了z索引，这导致了抽屉的问题，抽屉也依赖于该机制在顶部进行绘制。建议在steps上使用isolation，以将z索引排序限制在该容器内。（无论如何，这可能应该是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>

赞(0）回复(0）举报 2023-07-01

我来回答

css 如何从抽屉上方移除台阶

2条答案

相关问题

热门标签

最新问答