滚动div内绝对定位元素重叠问题的修复方法（无法修改HTML）

因为无法修改HTML，我们可以通过调整CSS布局逻辑，解决绝对定位导致的元素重叠问题，同时实现#text-bottom始终贴紧#main底部的响应式效果：

核心思路 #

放弃绝对定位方案，将滚动容器#main改为Flex垂直布局，利用margin-top: auto让#text-bottom自动对齐容器底部，同时保持所有元素在文档流内，从根源避免重叠。

修改后的CSS代码 #

@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/hk-grotesk.min.css");
* {
  font-family: "HK Grotesk", sans-serif;
  font-size: 28px;
}

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#all {
  display: grid;
  height: 100vh;
  width: 100vw;
  grid-template-areas: "header header header header" "subnav haupt haupt haupt" "footer footer footer footer";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 130px 1fr 30px;
}

#subnavigation_float {
  grid-area: subnav;
}

#main {
  grid-area: haupt;
  overflow-y: scroll;
  border-left: 1px solid;
  color: var(--dark);
  /* 改为flex垂直布局 */
  display: flex;
  flex-direction: column;
  /* 调整padding为响应式值，避免小屏幕右侧留白过大 */
  padding: 0 20px 8px 0;
  /* 移除原position:relative，不再需要 */
}

#text {
  /* 替换固定宽度为最大宽度+自适应，适配小屏幕 */
  max-width: 640px;
  width: 100%;
  /* 用margin-top替代top定位，符合文档流逻辑 */
  margin-top: 8px;
  background-color: beige;
}

#text-bottom {
  /* 替换固定宽度为最大宽度+自适应 */
  max-width: 640px;
  width: 100%;
  /* 移除绝对定位相关属性 */
  position: static;
  /* 利用margin-top:auto在flex布局中自动贴底 */
  margin-top: auto;
  background-color: antiquewhite;
}

关键修改说明 #

1. Flex布局改造：#main设置display: flex; flex-direction: column;，让内部元素按垂直方向排列，所有元素都保留在文档流中，彻底解决绝对定位的重叠问题。
2. 自动底部对齐：#text-bottom添加margin-top: auto;，在Flex垂直布局中，这个属性会将元素自动推到容器底部，无论容器高度如何变化都能保持贴底。
3. 响应式宽度适配：将#text和#text-bottom的固定宽度640px改为max-width: 640px; width: 100%;，确保在小屏幕上元素不会溢出容器，同时保持最大宽度限制。
4. 布局细节优化：用margin-top替代top定位，移除不必要的position: relative，让布局逻辑更清晰。

这个方案不需要修改任何HTML代码，同时完美实现了响应式底部对齐，且不会出现元素重叠问题。

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