如何实现Accordion展开时自动推动下方其他元素？

完全可以用纯CSS和HTML解决这个问题，核心是避免给折叠内容设置绝对定位或固定高度，让容器依靠内容自然撑开高度，从而推动下方元素。

问题根源 #

你遇到的重叠问题，通常是因为给展开的文本区域加了position: absolute，或者给外部flex容器设置了固定高度，导致容器无法根据内容变化调整自身高度，展开的内容就会溢出覆盖下方元素。

解决方案示例 #

下面是一个符合需求的完整实现，基于flex布局+checkbox控制的Accordion：

<div class="flex-container">
  <!-- 第一个Accordion -->
  <div class="accordion-item">
    <input type="checkbox" id="accordion1" class="accordion-checkbox">
    <label for="accordion1" class="accordion-header">
      面板1标题
    </label>
    <div class="accordion-content">
      这里是面板1的展开内容，文本可以很长，比如：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>

  <!-- 第二个Accordion -->
  <div class="accordion-item">
    <input type="checkbox" id="accordion2" class="accordion-checkbox">
    <label for="accordion2" class="accordion-header">
      面板2标题
    </label>
    <div class="accordion-content">
      这里是面板2的展开内容，同样支持多行文本：Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>

  <!-- 下方元素，会被展开的Accordion推动 -->
  <div class="bottom-element">
    我是下方的元素，不会被折叠面板覆盖
  </div>
</div>

对应的CSS：

.flex-container {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 元素间的间距，可选 */
  width: 400px;
  margin: 2rem auto;
}

.accordion-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden; /* 避免内容溢出容器 */
}

.accordion-checkbox {
  display: none; /* 隐藏原生checkbox */
}

.accordion-header {
  padding: 1rem;
  background-color: #f5f5f5;
  cursor: pointer;
  display: block;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  transition: max-height 0.3s ease; /* 平滑展开动画 */
}

/* 当checkbox被选中时，展开内容 */
.accordion-checkbox:checked ~ .accordion-content {
  max-height: 200px; /* 设置一个足够容纳内容的最大高度，或者用fit-content（兼容性稍差） */
  padding: 1rem;
}

关键要点 #

• 不要给.flex-container或.accordion-item设置固定高度，让它们由内部内容自然撑开
• 用max-height配合overflow: hidden实现折叠/展开，而不是绝对定位
• 利用CSS兄弟选择器~关联checkbox状态和内容的显示状态
• 如果需要更好的兼容性，max-height可以设置一个足够大的值（比如1000px），如果用max-height: fit-content，需要注意部分旧浏览器不支持

这样设置后，当Accordion展开时，内容区域的高度会被内容撑开，带动外层容器高度增加，自然就会推动下方元素，不会出现重叠。

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