如何解决绝对定位页脚图片与页面内容重叠问题？

你当前的问题根源是absolute定位的元素脱离了正常文档流，容器内的内容不会为它预留空间，所以窗口调整时内容会和图片重叠。下面是两种可行的修复方案：

方案1：利用Flex布局自动推底（推荐） #

既然主容器已经使用flex flex-col布局，完全可以去掉图片的absolute定位，通过margin-top: auto让图片自动固定在容器底部，同时保持左下角对齐。这种方式下图片会跟着容器内容的高度变化自动调整位置，从根源避免重叠。

修改后的代码：

<div
  className="flex flex-col relative h-full m-24 px-24 bg-blue-10 overflow-auto"
  style={{
    backgroundImage: `url(${GmpStaticImages.WhatsNewBackground})`,
    backgroundSize: "cover",
  }}
> 
  <div>
    rest of the content
  </div>
  <img
    src={WhatsNewFooter}
    style={{
      marginTop: "auto",
      alignSelf: "flex-start", // 保持左对齐
      paddingBottom: "26px",
    }}
    alt="FooterImage"
  />
</div>

方案2：为容器添加底部内边距（保留absolute定位） #

如果必须保留absolute定位，需要给主容器添加等于图片高度+现有paddingBottom值的底部内边距，确保容器内的内容不会延伸到图片所在的区域。

假设你的页脚图片高度是100px，那么容器的padding-bottom需要设置为126px（100px + 26px）：

修改后的代码：

<div
  className="flex flex-col relative h-full m-24 px-24 bg-blue-10 overflow-auto pb-[126px]" // 添加底部内边距
  style={{
    backgroundImage: `url(${GmpStaticImages.WhatsNewBackground})`,
    backgroundSize: "cover",
  }}
> 
  <div>
    rest of the content
  </div>
  <img
    src={WhatsNewFooter}
    style={{
      position: "absolute",
      bottom: 0,
      left: 0,
      paddingBottom: "26px",
    }}
    alt="FooterImage"
  />
</div>

注意：这个方案需要提前明确图片的准确高度，如果图片高度是动态的，方案1的适配性更强。

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