Css 相对元素与先前的绝对元素重叠

我在使用顺风定位元素时遇到问题。我目前有一个子菜单定位为绝对。在这个元素下面，我有一个搜索栏，它的父元素是相对的，元素本身是绝对的。这使得搜索图标可以在输入中间显示出来。

打开子菜单时，搜索栏与子菜单重叠

形象

已经试过了 我试着用另一种方式定位元素，在不同的位置之间切换。我还尝试为讨论中的元素设置z索引

Html

丹尼尔·凯利德
管理员
日志ut
滤器

在我推荐您共享HTML的同时，我需要要求您也共享相关的CSS-最好将其设置为“”以复制该问题。现在我们只能做出有根据的猜测。谢谢你的快速回复。我认为，由于tailwind框架是基于实用程序的，因此没有必要这样做。每个类表示一个选择器。因此类

flex

等于

display:flex

，

绝对

等于

位置：绝对等等。如果它仍然没有意义，我会更乐意收集它们，但这将需要一些时间…我有同样的问题。尝试了z索引，但不起作用。这真的在困扰我的项目。
    <div>
        <nav>
            <!-- other navbar code -->
            <div class="block">
                <div class="hidden sm:block">
                    <a href="#" class="flex items-center font-medium text-base text-gray-500 hover:text-gray-900 sm:mt-0 sm:text-xs sm:block">
                        <svg class="h-5 mr-2 fill-current h-5 mr-2 fill-current sm:block sm:m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <!-- path -->
                        </svg>
                        Name
                    </a>
                </div>
                <div class="sm:absolute sm:right-0 sm:mr-5 sm:bg-white sm:rounded sm:shadow"> <!-- needs to be absolute to not mess ut rest of navbar -->
                    <div class="border-t border-gray-300 sm:border-none">
                        <div class="px-5 py-5">
                            <span class="text-xs uppercase tracking-wider text-gray-500 font-semibold">Daniel Kjellid</span>
                            <a href="#" class="block mt-2 text-gray-600 hover:text-gray-900">Action</a>
                        </div>
                    </div>
                    <div class="border-t border-gray-300">
                        <div class="px-5 py-5">
                            <span class="text-xs uppercase tracking-wider text-gray-500 font-semibold">Administrator</span>
                            <a href="#" class="block mt-2 text-gray-600 hover:text-gray-900">Another action</a>
                        </div>
                    </div>
                    <button class="w-full text-center py-4 text-gray-900 font-medium bg-gray-200 hover:bg-gray-300">
                        Logg ut
                    </button>
                </div>
            </div>
        </nav>
    </div>
    <div class="bg-white px-5 py-3 flex justify-between items-center border-b border-gray-300">
        <div class="relative mr-3 w-full"> <!-- needs to be relative to position svg inside input -->
            <div class="absolute inset-y-0 left-0 flex items-center pl-3">
                <svg class="h-6 w-6 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <!-- path -->
                </svg>
            </div>
            <input type="text" class="form-input pl-10 py-2 rounded-lg bg-gray-300 text-gray-600 block w-full" placeholder="Søk blant hundrevis av varer">
        </div>
        <button class="open-filter-btn bg-gray-300 py-2 px-4 rounded-lg text-gray-600 flex items-center font-medium" type="button">
            <svg class="filter-closed-icn h-5 w-5 fill-current mr-2" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- path -->
            </svg>
            <svg class="filter-open-icn h-6 fill-current text-gray-600 hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <!-- path -->
            </svg>       
            Filter
        </button>
    </div>