Antecedentes y problema:
Estoy usando Tailwind CSS y Alpine.js para una barra de búsqueda simple que tiene un menú desplegable posicionado usando absolute
Codepen aquí: https://codepen.io/jdonline/pen/YzXpbyJ
Cuando ubico el menú desplegable usando " relative ", se posiciona perfectamente como quiero (pero estira el resto de la página que no quiero). Sin embargo, cuando cambio esto a absolute , aunque ya no estira la página, extiende el menú desplegable más de lo esperado.
Ejemplo:
Puede ver esto haciendo clic en la flecha desplegable en el lado derecho de la barra de búsqueda. También puede ver la diferencia al cambiar de absolute a relative en la Línea 26
Pregunta:
¿Cómo puedo, usando Tailwind.css, colocar el menú desplegable para que tenga una posición absolute , pero no se extienda más allá de la barra de búsqueda?
Encontré mi respuesta en esta propuesta en el perfil de Tailwind Github. https://github.com/tailwindlabs/tailwindcss/discusiones/1531
Agregando esta clase de utilidad funciona perfectamente:
.inset-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }La respuesta es muy simple, position:absolute debe tener un div principal con position:relative , en su caso, relative es para el cuerpo, creo, debe dar relativo al div principal, que es el número de línea n 25,
También puede consultar Posición 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">solo con viento de cola, puede usar las siguientes clases
absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2pues seria como
<div class="relative"> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> </div> <div>