position: fixed与flexbox冲突致元素重叠，如何实现左右分布对齐？

当元素设置position: fixed后会脱离文档流，原flex容器会忽略它的尺寸和位置，导致右侧元素左移重叠，同时垂直对齐失效。可以用以下几种方式解决：

方法1：单独定位fixed元素 + 给右侧元素预留空间 #

直接给fixed元素设置垂直对齐，同时给右侧元素添加左侧外边距，避免重叠：

<div class="flex items-center justify-between">
    <div class="bg-blue-500 p-2 fixed left-0 top-1/2 -translate-y-1/2">1</div>
    <div class="bg-red-500 p-12 ml-[calc(2rem+4px)]">2</div>
</div>

• top-1/2 -translate-y-1/2 实现fixed元素垂直居中，和原flex的items-center效果一致
• ml-[calc(2rem+4px)] 是根据左侧元素的宽度（内边距+内容宽度）计算的左外边距，确保右侧元素不被遮挡

方法2：使用Grid布局替代Flex #

Grid布局可以更灵活地分配空间，即使元素脱离文档流也能通过占位项保留位置：

<div class="grid grid-cols-[auto_1fr] items-center">
    <div class="bg-blue-500 p-2 fixed left-0">1</div>
    <div class="bg-red-500 p-12 justify-self-end">2</div>
</div>

• grid-cols-[auto_1fr] 让第一列自适应左侧元素宽度，第二列占剩余空间
• justify-self-end 让右侧元素靠右对齐，同时items-center保证垂直居中

方法3：给fixed元素添加占位容器 #

在左侧fixed元素外面套一个和它尺寸相同的占位div，这样flex容器仍能识别左侧空间，避免右侧元素左移：

<div class="flex items-center justify-between">
    <div class="bg-blue-500 p-2 invisible"> <!-- 占位容器，和fixed元素尺寸一致 -->
        <div class="bg-blue-500 p-2 fixed left-0 top-1/2 -translate-y-1/2">1</div>
    </div>
    <div class="bg-red-500 p-12">2</div>
</div>

• 占位容器用invisible隐藏视觉内容，但保留布局空间
• fixed元素通过top-1/2 -translate-y-1/2实现垂直居中，和flex的items-center对齐

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