Позиционирование абсолютного div внутри overflow-x: auto - PullRequest
Новая
       24

Позиционирование абсолютного div внутри overflow-x: auto

1 голос
/ 06 ноября 2019

Я пытаюсь позиционировать 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 (или ничего) и я получаю ожидаемый визуальный, но я не могу прокрутить внутри контейнера / Navbar. enter image description here

  • Использование overflow-y: auto Я могу прокручивать содержимое контейнера / навигационной панели, но не вижу ожидаемого изображения. enter image description here

Редактировать Поскольку мне нужно добавить фрагмент стека: 

<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;
}
...