I’m developing a website and have encountered an issue with making a div that is absolutely positioned responsive across different screen sizes. Here’s the context and what I’ve tried so far:

Problem:
I have a header section in my HTML where I’ve positioned a “call to action” (CTA) div absolutely. This div contains several buttons. While the positioning looks perfect on one specific screen size, it doesn’t adjust correctly when I resize the browser window or view it on different devices.

Code Example:
Here is the relevant part of my HTML and CSS:

<header class="min-h-[25vh] max-w-full relative">
    <div class="absolute top-[0px] md:top-[-155px] min-h-full">
        <video src="../../../videos/video-accueil.mp4" autoplay muted playsinline loop></video>
    </div>
    <div class="relative">
        <div class="flex flex-col md:flex-row md:space-x-7 items-center space-y-4 justify-around z-20 absolute bottom-[-300px] md:space-y-0 md:bottom-[-380px] left-0 right-0 mx-auto w-fit">
            <!-- Buttons here -->
        </div>
    </div>
</header>