I'm attempting to design a card where an image pops out of the card. I've tried using z-index, but it doesn't seem to be working as expected. Here is the code I have:
<div class="flex flex-col">
<div class="shadow-2xl rounded-xl w-96 h-96 pb-8 px-8 relative">
<div>
<button class="z-50 mb-10">
<img src="../assets/person.svg" alt="" />
</button>
<p class="text-center bt-smalltitle font-bold pb-4">
Name Surname
</p>
<div class="flex items-center justify-center pb-4">
<button
class="bg-black rounded-2xl text-center text-white bt-book px-2 py-1.5"
>
40$ Per session
</button>
</div>
<div class="flex flex-row items-stretch justify-between pb-5">
<p>Example</p>
<p>Example</p>
</div>
<p class="text-center bt-smalltext">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
placeat aperiam tempora.
</p>
</div>
</div>
</div>
Additionally, I would like the image to have a sticky position so that if the size of the card changes, the position of the image adjusts accordingly.
Here is an example of what I'm aiming for: https://i.sstatic.net/StE0t.png