在Tailwind CSS中如何堆叠居中元素并实现前后错位布局？

你可以通过相对定位+绝对定位结合z-index来实现这个重叠效果，调整后的代码如下：

<div class="flex-col relative">
    <div class="mx-auto relative z-10">
        <iframe width="812" height="478" src="https://www.youtube.com/embed/NpEaa2P7qZI" class="rounded-[40px]"></iframe>
    </div>
    <div id="circle" class="rounded-full bg-slate-500 h-96 w-96 absolute top-[120px] left-1/2 transform -translate-x-1/2"></div>
</div>

关键修改点说明：

• 给父容器.flex-col添加relative：让子元素的绝对定位以该父容器为参考基准
• 给iframe的外层div添加relative z-10：提升iframe的层级，确保它显示在圆形元素上方
• 给圆形元素设置absolute定位：脱离文档流实现与iframe重叠；通过top-[120px]调整垂直偏移量（数值可按需修改），再用left-1/2 transform -translate-x-1/2让圆形保持水平居中

你可以根据实际视觉需求调整top的数值，精准控制圆形元素的下移幅度。

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