CSS -制作一个侧栏盒粘着

Question

我在我的项目中使用TailwindCSS。我的页面如下所示：

<main class="max-w-7xl mx-auto mt-6 px-4">
  <div class="flex flex-col md:space-x-12 justify-center md:flex-row">
    <div class="w-full md:w-9/12 mb-8">
      <h1 class="text-3xl font-bold mt-2 mb-4">Title</h1>
      <p class="mb-4 uppercase text-gray-500">META DATA</p>
      <div class="prose lg:prose-lg post">
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
      </div>
      <hr class="mt-5" />
    </div>
    <div class="w-full md:w-3/12">
      <div class="mb-5 mx-auto" style="max-width:300px">
        <div class="rounded rounded-lg border">
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
        </div>

        <div class="rounded rounded-lg border mt-10 sticky self-auto top-20">
          <div class="p-20">Make this box sticky</div>
        </div>
      </div>
    </div>
  </div>
</main>

我想让右边边栏底部的盒子粘稠，但它不会发生。我见过很多线程，并遵循了一些建议，比如让它灵活启动，但是它在这个布局中不起作用。你能帮忙吗？

你可以看到这里的操场- https://play.tailwindcss.com/MaFc2vXQRe

Answer 1

在粘滞div的父div上添加display: unset;，检查下面的代码。

<div class="mb-5 mx-auto" style="max-width:300px; display: unset;">

如果你要面对任何问题，请告诉我