Flex布局下并排动态高度容器内绝对定位标签重叠问题求助

问题根源 #

你遇到的标签重叠，核心原因是绝对定位的标签没有找到正确的定位父级——如果标签的父盒子没设置position: relative，它们会默认相对于页面最外层的定位容器（比如body）定位，自然会挤在一起。而用固定百分比的left/right，在移动端盒子堆叠变宽后，位置计算会出错。

解决方案步骤 #

1. 给每个子盒子（包含标签和内容的容器）添加position: relative，让标签以自己所在的盒子为基准定位。
2. 标签的定位用固定间距（比如rem或px）代替百分比，确保移动端盒子宽度变化时，标签始终贴在盒子的对应侧边。
3. 给子盒子设置顶部内边距，避免标签覆盖内容。

示例代码 #

HTML结构

<div class="flex-container">
  <div class="box">
    <span class="tag tag-left">左侧标签</span>
    <div class="box-content">
      这里是左侧盒子的内容，长度可以任意变化
    </div>
  </div>
  <div class="box">
    <span class="tag tag-right">右侧标签</span>
    <div class="box-content">
      这里是右侧盒子的内容，长度可以更长，flex会自动让两个盒子高度保持一致这里是右侧盒子的内容，长度可以更长，flex会自动让两个盒子高度保持一致这里是右侧盒子的内容，长度可以更长，flex会自动让两个盒子高度保持一致
    </div>
  </div>
</div>

CSS样式

/* 外层flex容器，保持等高 */
.flex-container {
  display: flex;
  gap: 1.5rem;
  padding: 1rem;
}

/* 子盒子：设置相对定位，作为标签的定位父级 */
.box {
  flex: 1;
  position: relative;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  /* 顶部内边距给标签留空间 */
  padding: 2.5rem 1rem 1rem;
}

/* 标签样式：绝对定位 */
.tag {
  position: absolute;
  top: 0.8rem;
  padding: 0.3rem 0.8rem;
  background-color: #2196f3;
  color: #fff;
  border-radius: 3px;
  font-size: 0.9rem;
}

/* 左侧标签贴左 */
.tag-left {
  left: 0.8rem;
}

/* 右侧标签贴右 */
.tag-right {
  right: 0.8rem;
}

/* 移动端适配：切换为块级堆叠 */
@media (max-width: 768px) {
  .flex-container {
    display: block;
  }
  .box {
    margin-bottom: 1.5rem;
  }
}

效果说明 #

• 桌面端：两个盒子通过flex保持等高，标签分别在各自盒子的左上、右上位置，不会重叠。
• 移动端：盒子堆叠后，每个标签依然贴在自己盒子的对应侧边，位置不会错乱，同时盒子高度依旧由最长内容决定。

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