In my WEB application I have created a search-bar which filters products based on users input. Problem is, once I show the suggestions to the user my search results are pushing other elements down. Here is what I mean.

Picture 1. How UI initially looks

Picture 2. How UI looks after user starts typing:

How do I address this so that elements are not pushed down, but dropdown list is shown over these elements (z-index does not work)? Here is my HTML code:

        <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>

And here is my CSS code:

.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;
}

Any help would be much appreciated!