如何使用 Tailwind 向此设计添加“标题”

Posted 2023-03-07

【中文标题】如何使用 Tailwind 向此设计添加“标题”

【英文标题】：How do I add a "header" to this design using Tailwind

【发布时间】：2021-12-14 04:00:43

【问题描述】：

我想要一个“标题”越过顶部。 诀窍是主容器不能真正改变。

这可能吗？

我目前的代码如下：

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

<div class="h-screen">
  <div class="h-full">
    <div class="flex flex-auto overflow-x-auto overflow-y-hidden bg-gray-50 h-full">

      <div
        class="relative flex flex-col ml-2 my-2 overflow-hidden bg-white rounded-lg shadow bg-gray-200"
        style="width:300px;min-width: 300px;"
      >
        <div
          class="text-center font-semibold bg-gray-200 h-4 p-2 text-2xl"
          style="min-height:3rem"
        >Stuff</div>
        <div class="flex flex-col overflow-x-hidden overflow-y-auto bg-gray-200 p-2 h-full"></div>
      </div>

      <div
        class="relative flex flex-col ml-2 my-2 overflow-hidden bg-white rounded-lg shadow bg-gray-200"
        style="width: 300px; min-width: 300px;"
      >
        <div
          class="text-center font-semibold bg-gray-200 h-4 p-2 text-2xl"
          style="min-height:3rem"
        >More Stuff</div>
        <div class="flex flex-col h-full"></div>
      </div>

    </div>
  </div>
</div>

【参考方案1】：

您可以尝试使用带有position: fixed 的元素。这可以相对于视口定位。例如：

<div class="fixed top-0 left-0 right-0 z-50 bg-red-500 p-1">Header</div>

会在整个页面上放置一个标题。此代码可以放在您提供的代码中的任何位置。

您需要为页面的其余部分设置适当的上边距以避免内容重叠。

一个完整的例子如下所示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" referrerpolicy="no-referrer" />

<div class="h-screen">
  <div class="h-full mt-5">
    <div class="flex flex-auto overflow-x-auto overflow-y-hidden bg-gray-50 h-full">
      <div class="relative flex flex-col ml-2 my-2 overflow-hidden bg-white rounded-lg shadow bg-gray-200" style="width:300px;min-width: 300px;">
        <div class="text-center font-semibold bg-gray-200 h-4 p-2 text-2xl" style="min-height:3rem">Stuff</div>
        <div class="flex flex-col overflow-x-hidden overflow-y-auto bg-gray-200 p-2 h-full"></div>
      </div>
      <div class="relative flex flex-col ml-2 my-2 overflow-hidden bg-white rounded-lg shadow bg-gray-200" style="width: 300px; min-width: 300px;">
        <div class="text-center font-semibold bg-gray-200 h-4 p-2 text-2xl" style="min-height:3rem">More Stuff</div>
        <div class="flex flex-col h-full"></div>
        
        <div class="fixed top-0 left-0 right-0 z-50 bg-red-500 p-1">Header</div>
      </div>
    </div>
  </div>
</div>