En mi aplicación WEB, he creado una barra de búsqueda que filtra productos según la entrada de los usuarios. El problema es que, una vez que muestro las sugerencias al usuario, mis resultados de búsqueda están empujando hacia abajo otros elementos. Esto es lo que quiero decir.

Imagen 1. Cómo se ve inicialmente la interfaz de usuario

Imagen 2. Cómo se ve la interfaz de usuario después de que el usuario comienza a escribir:

¿Cómo soluciono esto para que los elementos no se desplacen hacia abajo, pero la lista desplegable se muestra sobre estos elementos (el índice z no funciona)? Aquí está mi código HTML:

 <div style="width: 80%;" class="search-input"> <input id='searchBar' type="text" class="form-control w-100" placeholder="Pronadji proizvod ..."> <div id="autocom-box" class="autocom-box"></div> </div> <span class="input-group-text cursor-pointer"><i class='bx bx-search'></i></span>

Y aquí está mi código CSS:

 .search-input .autocom-box { padding: 0px; max-height:280px; overflow-y:auto; opacity: 0; pointer-events:none; } .search-input.active .autocom-box { padding: 10px 8px; opacity: 1; pointer-events:auto; } .autocom-box li{ list-style:none; padding: 8px 12px; width: 100%; cursor: default; border-radius: 3px; display: none; } .search-input.active .autocom-box li{ display: block; } .autocom-box li:hover{ background: #6b0707; }

¡Cualquier ayuda sería muy apreciada!