求助：绝对定位元素导致下方section内容重叠的布局问题

你遇到的问题核心是绝对定位元素脱离文档流导致父元素高度塌陷：
当子div设置position: absolute后，它会完全跳出正常的文档流，不再给父div贡献高度。而你的父div只是设置了position: relative（用来给绝对定位的子元素提供定位参考），但没有设置明确的高度，所以父div的高度会塌陷为0。这就导致后面的<section class="promotion-banner">会向上移动，和上方的div区域重叠。

根据你的布局需求，推荐以下几种解决方式：

1. 给父div设置明确高度（最简单直接） #

如果你的绝对定位子div高度是固定的，直接给父div设置对应的高度值，让它占据足够的空间：

.parent-div {
  position: relative;
  height: 300px; /* 数值和子div的实际高度一致 */
}

2. 改用Flex/Grid布局替代绝对定位（更灵活，避免文档流脱离） #

如果你的布局不需要绝对定位的特殊特性（比如多层级重叠），可以用Flex或Grid来实现相同的定位效果，同时保持元素在文档流中，父元素会自动适应子元素的高度：

Flex示例（适合常规定位需求）： #

.parent-div {
  display: flex;
  /* 比如要子div靠右上角定位，就用以下属性 */
  justify-content: flex-end;
  align-items: flex-start;
}
/* 子div不需要设置absolute了 */
.child-div {
  /* 可以根据需求调整margin等样式 */
}

Grid示例（适合需要层叠效果的场景）： #

.parent-div {
  display: grid;
}
.child-div {
  grid-area: 1/1; /* 让子div占据父元素的整个网格区域，类似绝对定位的层叠效果 */
}

3. 用JavaScript动态计算高度（适配高度不固定的情况） #

如果子div的高度是动态变化的（比如内容由后端返回），可以用JS获取子div的实际高度，然后设置给父div：

const parent = document.querySelector('.parent-div');
const child = document.querySelector('.child-div');
parent.style.height = child.offsetHeight + 'px';

修改后，<section class="promotion-banner">就会正常排列在父div的下方，不会再重叠到上方区域了。

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