Bootstrap CSS z-index

Question

Я пытаюсь поместить div поверх другого. Я читаю разные ответы на вопросы на этом сайте. Но никто из них не работал для меня. Я хочу, чтобы результаты поиска ('Anton') отображались в верхней части таблицы ('Customer').

Ниже приведен фрагмент кода, связанный с текстовым полем поиска и div результатов. (К вашему сведению: я использую Laravel LiveWire)

<div class="relative pb-2">
    <input 
        type="text" 
        name="model-search" 
        wire:model="query"
        wire:keydown.escape="clear"
        wire:keydown.tab="clear"
        placeholder="enter search text here..."
        class="form-control form-control-sm search-box" 
    >
    @if(!empty($query))
        <div class="absolute shadow-sm rounded-sm mt-2" style="z-index: 1000 !important;">
            @if(!empty($models))
                @foreach ($models as $model)
                    <a href="#" class="list-group-item list-group-item-action py-1">{{$model['name']}}</a>
                @endforeach
            @else
                <div class="list-group-item py-1">No results</div>
            @endif
        </div>
    @endif
</div>

Обновление 1

• Прикрепленный снимок экрана с фрагментом кода файла блейда, где используется компонент livewire.

• Результат

• CSS

  .search-results {z-index: 1000! Важный; }