Background & Problem:
I’m using Tailwind CSS and Alpine.js for a simple search bar that has a dropdown positioned using
Codepen here: https://codepen.io/jdonline/pen/YzXpbyJ
When I position the dropdown using
relative, it positions perfectly as I want it to (but stretches the rest of the page which I don’t want). However, when I change this to
absolute, although it no longer stretches the page, it extends the dropdown wider than expected.
You can see this by clicking the dropdown arrow on the right side of the search bar. You can also see the difference when changing
relative on Line 26
How can I, using Tailwind.css, position the dropdown so it has
absolute position, but doesn’t extend wider than the search bar?
The answer is very simple,
position:absolute should have a parent div with
position:relative, in your case
relative is for body I think, You need to give relative to the parent div which is n line number 25,
You can also refer Position 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">