React组件重叠问题：Banner组件覆盖AboutUs组件咨询

问题根源 #

Banner组件里的<img>和所有子元素都用了absolute定位，而父容器<div className="relative">没有设置高度——绝对定位元素会脱离文档流，不占据父容器空间，导致父容器高度为0。后续的AboutUs组件会从文档流顶部开始渲染，看起来就像是被Banner的绝对定位元素覆盖了。

修复方案 #

有两种常用的解决办法：

方法一：给父容器设置与图片匹配的高度 #

既然图片已经定义了h-80 md:h-96的高度，直接把这个高度加到父容器上，让父容器占据对应空间：

function Banner() {
  return (
    <>
      {/* 新增h-80 md:h-96，和图片高度对齐 */}
      <div className="relative h-80 md:h-96">
        <img
          className="w-full h-full object-cover object-center absolute brightness-75"
          alt="banner"
          src={bannerImage}
        />
        <div className="absolute bg-white top-2 left-2 md:top-5 md:left-5 bg-transparent border border-solid cursor-default hover:scale-110 transition-all duration-300 hover:opacity-30 border-white">
          <h1 className=" text-sm md:text-xl font-semibold md:px-5 md:py-2 px-2 py-1">
            FAMILY LAW
          </h1>
        </div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 translate-y-12 md:translate-y-28">
          <h2 className="text-center font-medium text-white">
            We Always <span className=" text-[#E5912E]">care</span> about our
            client <span className=" text-[#E5912E]">satisfaction</span>
          </h2>
          <br />
          <p className="font-bold text-xl md:text-4xl text-center text-white transition-all duration-300">
            <span className=" text-[#E5912E]">JUSTICE</span> FOR ALL
          </p>
          <br />
          <div className="flex space-x-2 justify-center">
            <div className="bg-[#E5912E] px-3 py-1 rounded-sm cursor-pointer">
              <h2 className="text-white text-sm text-center">Know More</h2>
            </div>
            <div className="bg-transparent border border-solid px-4 py-1 rounded-sm cursor-pointer">
              <h2 className="text-white text-sm text-center">About us</h2>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

方法二：移除图片的absolute定位 #

如果不需要图片保持绝对定位，直接去掉absolute类，让图片占据正常文档流空间，父容器会自动被图片撑起高度：

function Banner() {
  return (
    <>
      <div className="relative">
        <img
          {/* 移除absolute类 */}
          className="w-full h-80 md:h-96 object-cover object-center brightness-75"
          alt="banner"
          src={bannerImage}
        />
        <div className="absolute bg-white top-2 left-2 md:top-5 md:left-5 bg-transparent border border-solid cursor-default hover:scale-110 transition-all duration-300 hover:opacity-30 border-white">
          <h1 className=" text-sm md:text-xl font-semibold md:px-5 md:py-2 px-2 py-1">
            FAMILY LAW
          </h1>
        </div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 translate-y-12 md:translate-y-28">
          <h2 className="text-center font-medium text-white">
            We Always <span className=" text-[#E5912E]">care</span> about our
            client <span className=" text-[#E5912E]">satisfaction</span>
          </h2>
          <br />
          <p className="font-bold text-xl md:text-4xl text-center text-white transition-all duration-300">
            <span className=" text-[#E5912E]">JUSTICE</span> FOR ALL
          </p>
          <br />
          <div className="flex space-x-2 justify-center">
            <div className="bg-[#E5912E] px-3 py-1 rounded-sm cursor-pointer">
              <h2 className="text-white text-sm text-center">Know More</h2>
            </div>
            <div className="bg-transparent border border-solid px-4 py-1 rounded-sm cursor-pointer">
              <h2 className="text-white text-sm text-center">About us</h2>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

方案说明 #

• 方法一适合需要保留图片绝对定位的场景（比如后续要在图片上叠加更多元素）；
• 方法二更简洁，适合仅用图片做背景、叠加文字的常规场景。

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