html - 在 overflow-x: auto 中定位绝对 div

Question

我正在尝试absolute div使用overflow-x: auto

简而言之，场景是这样的：

<div style="overflow-x: auto">
    <div style="position: relative">
        <div style="position: absolute">
            I'm not absolute :(
        </div>
    </div
</div>

---

我使用tailwindcss https://jsfiddle.net/fhp64ztv/2/做了一个最小的例子

现在，我有两个结果：

• 使用overflow-y: visible （或不使用），我得到了预期的视觉效果，但我无法在容器/导航栏内滚动。

• 使用overflow-y: auto我可以在容器/导航栏内滚动，但没有得到预期的视觉效果。

---

编辑因为我必须添加一个堆栈片段：

<nav class="nav bg-white flex items-center shadow justify-between flex-wrap p-6 sticky top-0 z-10">
    <div class="nav-content w-full flex-grow max-h-screen">
        <a href="#" class="nav-item block">Docs</a>
        <a href="#" class="nav-item block">Examples</a>
        <a href="#" class="nav-item block"> Blog</a>
        <div class="nav-item dropdown relative mt-4">
            <button class="text-indigo-500 inline-block">
                Profile
            </button>
            <div class="dropdown-items bg-white border absolute left-auto mt-2 py-2 z-50">
                <a href="#" class="dropdown-item block px-4 py-2">Account settings</a>
                <a href="#" class="dropdown-item block px-4 py-2">Support</a>
                <a href="#" class="dropdown-item block px-4 py-2">Sign out</a>
            </div>
        </div>    
    </div>
</nav>

.nav-content {
  /* I want it to look like this */
  /*overflow-y: visible;  */

  /* But I need this to scroll in the navbar */
   overflow-y: auto;
}

标签： htmlcsstailwind-css