Разрешить выпадающему списку переполнять другие компоненты, кроме нижнего колонтитула
У меня есть гибкий контейнер с картой. На карточке есть раскрывающийся список, в котором можно перемещаться по другим компонентам. Чтобы выпадающий список мог выходить за край карточки, выпадающий список был сделан «абсолютным», но теперь он также выходит за нижний колонтитул.
Сокращенный код:
<div class = "flex flex-col min-h-screen bg-gray-100">
<div id = "page-container" class = "flex flex-wrap justify-center sm:justify-start relative">
<div class = "border rounded-lg border-gray-300 p-4 bg-white m-2 flex flex-col">
<div>
<div class = "flex justify-between">
<div class = "font-semibold text-xl">Card</div>
<div class = "flex items-center cursor-pointer select-none">
<div class = "inline select-none pr-8 print-hidden">
<div class = "text-primary"><i class = "far fa-code-branch pr-4"></i>Expand</div>
<div class = "z-10 absolute rounded-b shadow">
<div>
First item
</div>
<div>
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "min-h-16 py-5 bg-red text-white flex-shrink-0">
<div class = "container mx-auto">
<div class = "h-full flex-wrap flex justify-between content-center text-center">
<div class = "w-full md:w-auto">
<img src = "https://via.placeholder.com/2000x100.png" class = "inline-block h-8 ml-4"></div>
</div>
</div>
</div>
</div>
Можно ли сделать нижний колонтитул так, чтобы он оставался под выпадающим списком?
Я мог бы использовать JavaScript, чтобы определить самую нижнюю точку раскрывающегося списка и всегда перемещать нижний колонтитул ниже этой точки. Но, возможно, есть лучший способ, изменив CSS.
См. этот КодПен для сокращенного примера.
Ответы 1
Вы можете просто добавить overflow-y-scroll к родителю div, где у вас есть z-10
затем укажите max-height для раскрывающегося списка, как это max-h-[90vh]
и дайте футер z-20
взгляните на https://play.tailwindcss.com/TqJJRKEEkR .
@ErwinRooijakkers о, теперь я понял, я думаю, что неправильно понял, что вы пытались сделать, я не уверен, есть ли способ добиться этого, понятия не имею
Спасибо, что упомянули эти интересные функции Tailwind, о которых я не знал. Он еще не делает полностью то, что я хочу, я думаю, что мой вопрос был не ясен. Выпадающий список под нижним колонтитулом - это не то, что я хочу. Я хочу, чтобы нижний колонтитул был ниже раскрывающегося списка, чтобы были видны и нижний колонтитул, и раскрывающийся список (нижний колонтитул ниже раскрывающегося списка). Вы знаете, как это сделать?