css - 将侧边栏放在正下方，而不设置任何 `top` 或 `bottom` 值

Question

我想设计一个选项来切换小型设备中的侧边栏。

因此，我尝试将 some 设置div为侧边栏，以便将 div 的值设置为top-0and left-0，将类设置为inset-y-0 left-0，因此它正好从 top-0 显示，但我想让侧边栏从顶部导航栏的末尾。

top在不设置or的任何值的情况下，如何将侧边栏恰好放置在顶栏下方bottom？

此外，当设备大于 时，侧边栏应与徽标一致sm。

<link href="https://unpkg.com/tailwindcss@1.0.0/dist/tailwind.min.css" rel="stylesheet" />

<header class="bg-teal-200">
  <div class="flex items-center justify-between px-0 sm:px-2 relative">
    <button @click="this.isOpen = !this.isOpen" type="button" class="rounded-full hover:bg-purple-200 h-10 w-10 
        flex items-center justify-center focus:outline-none sm:hidden">
        <svg
          class="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            v-if="!isOpen"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"
          ></path>
          <path
            v-else
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          ></path>
        </svg>
      </button>
    <nav class="flex items-center">
      <svg class="h-10 w-32 fill-current" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M12.372 31.672a27.83 27.83 0 01-1.974-2.1c-.224-.252-.868-1.036-1.932-2.352l-2.142-2.856c.784-.504 1.372-.952 1.764-1.344 1.176-1.232 1.764-2.73 1.764-4.494 0-.952-.042-1.876-.126-2.772a42.615 42.615 0 00-.21-2.394h3.78c-.196-.14-.35-.252-.462-.336-.7-.56-1.232-1.078-1.596-1.554l-.882-1.386a7.642 7.642 0 01-.882.42c-.728.336-1.218.518-1.47.546a6.48 6.48 0 01-.714.042h-.504c-1.232 0-2.632-.168-4.2-.504a42.191 42.191 0 01-1.974-.504l2.73 2.268 2.814 1.008v5.502h-2.94a.915.915 0 00-.714.336c-.196.224-.294.49-.294.798 0 .952.784 2.506 2.352 4.662 1.204 1.652 2.66 3.416 4.368 5.292l2.478 2.646 2.604 1.176-1.638-2.1zm10.555-18.816l5.208.504v4.83a4.483 4.483 0 01-.63.546 3.674 3.674 0 01-1.974.546c-.336 0-.784-.056-1.344-.168-.532-.112-.91-.224-1.134-.336.112-.224.196-.49.252-.798a5.88 5.88 0 00.084-.966c0-.532-.084-1.288-.252-2.268-.14-.98-.21-1.61-.21-1.89zm2.016 18.732l-3.36-5.166-1.974-3.15c.28-.168.504-.308.672-.42.504-.364.91-.714 1.218-1.05.224-.224.462-.574.714-1.05.084-.14.196-.364.336-.672.224.224.406.392.546.504.924.728 1.736 1.162 2.436 1.302l.42.084h.462c.364 0 .686-.014.966-.042.28-.028.532-.07.756-.126v6.762l8.4 5.46-4.452-5.628V13.402h2.688c-.196-.14-.35-.252-.462-.336-.7-.56-1.232-1.078-1.596-1.554a44.373 44.373 0 01-.588-.966 21.59 21.59 0 01-.336-.588c-.14.028-.252.042-.336.042-1.12.252-1.96.42-2.52.504-.56.084-1.246.14-2.058.168-.812.028-1.274.042-1.386.042-1.904 0-4.102-.154-6.594-.462a51.503 51.503 0 01-3.192-.462c.308.308.56.546.756.714.644.532 1.288.924 1.932 1.176.392.14.644.35.756.63.112.252.252.378.42.378.084 0 .126.574.126 1.722 0 .672-.014 1.33-.042 1.974 0 .644-.014 1.246-.042 1.806h-2.94c-.672 0-1.008.392-1.008 1.176 0 .84.686 2.366 2.058 4.578.896 1.456 2.198 3.318 3.906 5.586l2.184 2.856 2.1 1.68-.966-2.478zm13.907-18.06v15.12l8.358 5.376-4.41-5.544-.042-15.12h2.31c-.308-.252-.546-.448-.714-.588-.588-.504-1.008-.924-1.26-1.26l-.882-1.386-3.024.294c-1.092.112-1.96.168-2.604.168-.532 0-.868-.028-1.008-.084a.901.901 0 01-.294-.168l.252.378c.476.644 1.022 1.092 1.638 1.344l1.68 1.47zM31.066 5.59c.252-.14.602-.252 1.05-.336a7.32 7.32 0 011.428-.126c.784 0 1.498.112 2.142.336.644.196 1.106.518 1.386.966l3.444 4.914h1.554c-.14-.252-.714-1.176-1.722-2.772-1.288-2.016-2.436-3.696-3.444-5.04-.392-.504-.812-.896-1.26-1.176-.448-.308-.966-.462-1.554-.462h-4.494l1.47 3.696zm38.456 7.77l3.192.042c-.196-.14-.35-.252-.462-.336-.7-.56-1.232-1.078-1.596-1.554l-.882-1.386c-.364.028-.784.056-1.26.084-.476.028-1.106.098-1.89.21-.756.112-1.694.168-2.814.168a48 48 0 01-5.124-.294 31.867 31.867 0 01-2.394-.336c.448.308.812.546 1.092.714.868.532 1.582.924 2.142 1.176.56.224 1.274.462 2.142.714.28.084.644.182 1.092.294l2.814.504v8.61c-.112.252-.56.588-1.344 1.008-1.064.588-2.17.882-3.318.882-.7 0-1.19-.056-1.47-.168-.448-.196-.672-.574-.672-1.134 0-1.4 1.008-2.436 3.024-3.108.672-.224 1.694-.42 3.066-.588l-1.428-3.108c-1.96 0-3.514.322-4.662.966-1.428.784-2.142 1.96-2.142 3.528 0 1.848.532 3.472 1.596 4.872 1.092 1.4 2.478 2.1 4.158 2.1.7 0 1.54-.224 2.52-.672.168-.056.392-.182.672-.378v2.394l8.484 5.46-4.536-5.628V13.36zM57.652 3.322c.168-.056.756-.084 1.764-.084h1.05c.308.056.518.084.63.084.42 0 .84.084 1.26.252.42.14.728.406.924.798l4.284 6.552h1.218c0-.168-.602-1.26-1.806-3.276-1.344-2.268-2.52-4.074-3.528-5.418C62.692 1.194 61.74.676 60.592.676h-4.2l1.26 2.646zm-2.226 2.352l1.554 2.394 2.688-.084c.336 0 .658.014.966.042.28 0 .518.098.714.294l2.268 2.604h1.092a154.037 154.037 0 01-2.058-3.15c-.924-1.4-1.89-2.1-2.898-2.1h-4.326zm27.425 7.182l5.208.504v4.83a4.483 4.483 0 01-.63.546 3.674 3.674 0 01-1.974.546c-.336 0-.784-.056-1.344-.168-.532-.112-.91-.224-1.134-.336.112-.224.196-.49.252-.798a5.88 5.88 0 00.084-.966c0-.532-.084-1.288-.252-2.268-.14-.98-.21-1.61-.21-1.89zm2.016 18.732l-3.36-5.166-1.974-3.15c.28-.168.504-.308.672-.42.504-.364.91-.714 1.218-1.05.224-.224.462-.574.714-1.05.084-.14.196-.364.336-.672.224.224.406.392.546.504.924.728 1.736 1.162 2.436 1.302l.42.084h.462c.364 0 .686-.014.966-.042.28-.028.532-.07.756-.126v6.762l8.4 5.46-4.452-5.628V13.402h2.688c-.196-.14-.35-.252-.462-.336-.7-.56-1.232-1.078-1.596-1.554a44.373 44.373 0 01-.588-.966 21.59 21.59 0 01-.336-.588c-.14.028-.252.042-.336.042-1.12.252-1.96.42-2.52.504-.56.084-1.246.14-2.058.168-.812.028-1.274.042-1.386.042-1.904 0-4.102-.154-6.594-.462a51.503 51.503 0 01-3.192-.462c.308.308.56.546.756.714.644.532 1.288.924 1.932 1.176.392.14.644.35.756.63.112.252.252.378.42.378.084 0 .126.574.126 1.722 0 .672-.014 1.33-.042 1.974 0 .644-.014 1.246-.042 1.806h-2.94c-.672 0-1.008.392-1.008 1.176 0 .84.686 2.366 2.058 4.578.896 1.456 2.198 3.318 3.906 5.586l2.184 2.856 2.1 1.68-.966-2.478zm14.957-9.114l-3.108 3.108 3.108 3.108 3.108-3.108-3.108-3.108zm-3.108-6.636l3.108 3.024 3.108-3.024-3.108-3.15-3.108 3.15z"
            fill="#A886EF"
          />
          <path
            d="M51.057 25.078l-3.108 3.15 3.108 3.024 3.108-3.024-3.108-3.15z"
            fill="#FEFEFF"
          />
        </svg>
      <!---sidebar starts from here-->
      <div class="w-1/3 absolute h-screen inset-y-0 left-0 bg-gray-800 sm-flex sm-item-center">
        <a class="block" href="#">Destinations</a>
        <a class="block" href="#">Trip Plan</a>
        <a class="block" href="#">About Us</a>
      </div>
    </nav>
  </div>
</header>

预期结果：

标签： csstailwind-css

Answer 1

我这样做的方法是向侧边栏添加一个类，该类添加margin-top: 40px;以创建与顶部导航栏相同高度的偏移量。

这当然假设您的顶部导航栏是固定高度。