【发布时间】：2021-11-14 04:43:25
【问题描述】：
我正在尝试将带有一些文本的 div 覆盖在另一个 div 上，其中两个图像需要左右对齐。我过去使用过 flexbox，所以我很困惑为什么这不起作用，但我注意到一旦我从两个图像按我预期的样式中删除了 position:absolute（副作用是不再覆盖这两个图像） divs 彼此）。如果我以像素为单位设置宽度，它会按需要工作，但因为我正在设计跨屏幕尺寸，所以我想尽可能避免这样做。
我看到this 的问题说position:absolute 不应该与弹性框冲突，所以我不确定我为什么会遇到这个问题。
Here 是一个codepen，可以看到，当你去掉绝对定位时，猫的图像会移动到最右边，但是当它到位时，猫会立即与狗相邻。
<div style="display:flex;justify-content:space-between;position:absolute;z-index: -1;">
<div>FOO</div>
<div>BAR</div>
</div>
<div>
SOME TEXT
</div>
【问题讨论】：
-
所以你想把 FOOBAR 放在
Some Text上？ -
对不起，我没说清楚！我想将
SOME TEXT放在包含 FOO 和 BAR 的 div 上 -
为什么不 FOOBAR = flexbox 和一些 text= absolute？并提示如果你准备了一个在线沙盒，你会得到更好的回复。
-
感谢您的提示，下次我一定会这样做！你是对的，因为它可以很容易地被交换——哪个 div 是绝对定位的，哪个不是，这是相当随意的，但是文本 div 也涉及弹性框，所以在这一点上我更好奇为什么它看起来像如果
position:absolute阻止弹性框被执行。 -
添加了一个codepen。