How to position the dropdown to top of the grid elements - vue.js

Question

I tried to position the dropdown to the top of the page using Tailwind CSS and z-index.
But it goes behind of other elements in the grid
image
Code Snipets
<div class="flex flex-col gap-y-4">
<h1 class="text-3xl font-semibold text-left font-display sm:text-4xl">
Following
</h1>
<div class="flex flex-col w-full h-full gap-4 p-4 bg-white border border-gray-200 rounded shadow-md">
<h1 class="mb-3 text-xl font-semibold text-left font-display">
Legislators
</h1>
<div class="flex flex-col items-between">
<div class="relative z-10 grid gap-4 mb-5 xxs:grid-cols-1 xs:grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
<FollowingCard
v-for="govId in legislatorsFollowed"
:key="govId"
class="w-full sm:w-auto"
:legor-id="govId"
/>
</div>
</div>
</div>
FollowingCard.vue
person
{{ name }}
{{ role }} | {{ party }} | {{ state }} of {{ country }} {{showDropdown}}
more_vert
<div v-if="showDropdown" class="absolute top-0 left-0 z-40 flex flex-col py-1 mt-8 overflow-y-auto bg-white border border-gray-200 rounded-md shadow-sm max-h-40" data-testid="sessionDropdownBtn">
<button
v-for="session in topics"
:key="session"
class="relative z-50 flex items-center justify-start w-full px-4 py-2 text-sm text-left capitalize hover:bg-gray-100 font-body min-w-max"
>
{{ session }}
</button>
</div>
</button>
</div>
</transition>
</div>