如何让Flex项目重叠？实现圆形元素覆盖矩形框的布局需求

问题说明 #

当前布局里左右两个矩形框和中间圆形是无重叠的并排状态，需要调整为中间圆形覆盖左右矩形框边缘的效果。

原代码 #

<body class="bg-black">
    <div class="flex flex-col items-center md:flex-row md:justify-center gap-0">
        <div
            class="w-80 h-52 bg-black border-white border-2 border-opacity-30 rounded-lg flex flex-col justify-center items-center gap-4">
        </div>
        <div
            class="w-24 h-24 font-bold rounded-full text-white border-white border-2 border-opacity-30 flex items-center justify-center">
            OR</div>
        <div
            class="w-80 h-52 bg-black border-white border-2 border-opacity-30 rounded-lg flex flex-col justify-center items-center gap-4">
        </div>
    </div>
</body>

解决方案 #

给中间的圆形元素添加两个关键类就能实现需求：

• -mx-6：让圆形向左右方向各延伸一部分，覆盖到左右矩形的区域（数值可按需调整，比如-mx-8会覆盖更多）
• z-10：确保圆形的视觉层级高于左右矩形，避免被矩形遮挡

修改后的完整代码 #

<body class="bg-black">
    <div class="flex flex-col items-center md:flex-row md:justify-center gap-0">
        <div
            class="w-80 h-52 bg-black border-white border-2 border-opacity-30 rounded-lg flex flex-col justify-center items-center gap-4">
        </div>
        <div
            class="w-24 h-24 font-bold rounded-full text-white border-white border-2 border-opacity-30 flex items-center justify-center -mx-6 z-10">
            OR</div>
        <div
            class="w-80 h-52 bg-black border-white border-2 border-opacity-30 rounded-lg flex flex-col justify-center items-center gap-4">
        </div>
    </div>
</body>

补充说明 #

• 负外边距的数值可以根据实际视觉效果调整，数值越大覆盖的矩形区域越多；
• z-10是Tailwind的层级控制类，保证圆形在视觉上处于矩形上方。

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