Невозможно центрировать абсолютную позицию (попутный ветер. css)

Question

Справочная информация и проблема:

Я использую Tailwind CSS и Alpine. js для простой панели поиска с раскрывающимся списком с помощью absolute

Кодовый код здесь: https://codepen.io/jdonline/pen/YzXpbyJ

Когда я размещаю раскрывающийся список с помощью relative, он идеально позиционируется так, как я хочу (но растягивает оставшуюся часть страницы, которую я надеваю не хочу) Однако, когда я изменяю это на absolute, хотя он больше не растягивает страницу, он расширяет раскрывающийся список шире, чем ожидалось.

Пример:

Вы можете увидеть Для этого нажмите стрелку раскрывающегося списка справа от панели поиска. Вы также можете увидеть разницу при смене absolute на relative на Строка 26

Вопрос:

Как я могу, используя Tailwind . css, расположите раскрывающийся список таким образом, чтобы он занимал позицию absolute, но не расширялся бы шире строки поиска?

Answer 1

Ответ очень прост, position:absolute должен иметь родительский div с position:relative, в вашем случае relative для тела. Я думаю, вам нужно дать относительно родительского div, который равен n строке номер 25,

Вы также можете сослаться Позиция CSS

<div x-show.transition.opacity.duration.700ms="open" class="relative" >
    <div class="absolute inset-x-0 shadow-xl bg-white w-3/4 md:w-2/5 mx-auto -mt-1 rounded-lg rounded-t-none">