如何修复PHPBB论坛帖子中HTML/CSS标签内容与postbody重叠问题

核心问题出在两种实现的布局逻辑上：

• 第一种用绝对定位导致内容脱离文档流，无法撑开父容器，进而和下方postbody重叠；
• 第二种将内容放在标签内部，浮动布局下内容会跟随标签排列，无法统一显示在标签栏下方。

以下是修复后的完整实现，兼顾标签居顶、内容统一显示且不与postbody重叠：

<div class="tabs-container">
  <!-- 标签栏 -->
  <div class="tabs-header">
    <div class="tab">
      <input type="radio" id="tab-1" name="tab-group" checked>
      <label for="tab-1">Tab 1</label>
    </div>
    <div class="tab">
      <input type="radio" id="tab-2" name="tab-group">
      <label for="tab-2">Tab 2</label>
    </div>
    <div class="tab">
      <input type="radio" id="tab-3" name="tab-group">
      <label for="tab-3">Tab 3</label>
    </div>
    <div class="tab">
      <input type="radio" id="tab-4" name="tab-group">
      <label for="tab-4">Tab 4</label>
    </div>
  </div>
  <!-- 内容区 -->
  <div class="tabs-content-area">
    <div class="tab-content" id="content-1">Tab 1 Content</div>
    <div class="tab-content" id="content-2">Tab 2 Content</div>
    <div class="tab-content" id="content-3">Tab 3 Content</div>
    <div class="tab-content" id="content-4">Tab 4 Content</div>
  </div>

  <style>
    /* 清除浮动，确保标签栏撑开高度 */
    .tabs-header::after {
      content: "";
      display: table;
      clear: both;
    }

    .tab {
      float: left;
      margin-right: 10px;
    }

    .tab label {
      background: pink;
      color: #d1cec4;
      padding: 5px 10px;
      text-align: center;
      text-transform: uppercase;
      font-size: 13px;
      cursor: pointer;
      display: block;
    }

    .tab [type=radio] {
      display: none;
    }

    /* 默认隐藏所有内容 */
    .tab-content {
      display: none;
      padding: 10px;
      background: blue;
      box-sizing: border-box;
      margin-top: 5px;
    }

    /* 选中标签时显示对应内容 */
    #tab-1:checked ~ .tabs-content-area #content-1,
    #tab-2:checked ~ .tabs-content-area #content-2,
    #tab-3:checked ~ .tabs-content-area #content-3,
    #tab-4:checked ~ .tabs-content-area #content-4 {
      display: block;
    }

    /* 选中标签的样式 */
    [type=radio]:checked + label {
      background: transparent;
      color: #494949;
    }

    /* 确保容器不会溢出，适配PHPBB的postbody */
    .tabs-container {
      width: 100%;
      margin-bottom: 15px;
    }
  </style>
</div>

关键修改点： #

1. 分离标签与内容结构：将所有tab-content从单个tab元素中移出，统一放在标签栏下方的独立容器中，确保内容区域在标签栏正下方显示，不会跟随标签浮动。
2. 清除浮动撑高容器：通过::after伪元素清除标签栏的浮动，确保父容器高度被标签撑开，避免内容区域向上错位。
3. 关联标签与内容：通过id关联radio和对应的tab-content，选中radio时仅显示对应内容，逻辑清晰且符合CSS选择器规则。
4. 避免脱离文档流：内容区域使用默认的文档流布局，不会和PHPBB的postbody重叠，容器底部添加margin确保和后续内容间距正常。

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