如何让绝对定位的Div在不同屏幕尺寸下实现响应式？

你的问题出在硬编码固定像素值的定位方式上——bottom-[-300px]、md:bottom-[-380px]这种固定数值只能适配特定屏幕，一旦设备尺寸、header高度变化，定位就会错位。下面是几个实用的解决方案：

方案一：用相对单位替代固定像素 #

把固定像素换成百分比或视窗单位，让CTA位置基于父容器动态调整：

<div class="flex flex-col md:flex-row md:space-x-7 items-center space-y-4 justify-around z-20 absolute bottom-[-20%] md:bottom-[-25%] left-0 right-0 mx-auto w-fit">
    <!-- Buttons here -->
</div>

百分比会参考父容器（header）的高度计算，不同屏幕下能自动适配比例。

方案二：结合transform实现精准相对定位 #

用bottom-0让CTA贴紧header底部，再通过translate-y向下偏移自身高度的比例，这样不管CTA自身高度怎么变，位置都能相对header底部保持一致：

<div class="flex flex-col md:flex-row md:space-x-7 items-center space-y-4 justify-around z-20 absolute left-0 right-0 mx-auto w-fit bottom-0 translate-y-[50%] md:translate-y-[60%]">
    <!-- Buttons here -->
</div>

这种方式比固定像素更灵活，尤其适合CTA高度可能变化的场景。

方案三：放弃绝对定位，改用流式布局 #

如果不需要CTA脱离文档流，直接用margin-top代替绝对定位，让CTA跟着文档流走，适配性更稳定：

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

这种方式完全避免了绝对定位的适配痛点，适合对定位精度要求不是极端高的场景。

额外优化建议 #

• 给header加上overflow-hidden，防止视频或CTA在小屏上溢出：header class="min-h-[25vh] max-w-full relative overflow-hidden"
• 测试折叠屏、平板竖屏等非常规尺寸，微调响应式断点的数值，确保全场景适配。

内容的提问来源于stack exchange，提问作者SaintK