Next.js使用Image组件后背景图覆盖内容z-index设置不生效问题

问题核心原因 #

1. 你使用layout="fill"（或13+版本的fill属性）的Next.js Image组件默认会设置position: absolute，脱离正常文档流，而你的父容器<Container>没有设置position: relative，无法作为内部元素的定位与堆叠上下文容器。
2. z-index仅对position属性非static的元素生效，你给文字、按钮设置的z-index未生效，是因为这些元素默认是static定位，属性写了也不生效。
3. 你原本加在keen-slider__slide上的渐变背景会被绝对定位的Image组件覆盖，导致渐变效果失效。

修复步骤 #

• 给父容器<Container>添加relative类，设置为相对定位，作为内部所有绝对定位元素的参考容器。
• 给Image组件添加-z-10类，将图片层级调到最底层，不需要再给每个文字元素单独设置z-index，正常文档流的内容默认层级会高于z-index为负的元素。
• 单独添加一层渐变蒙层，盖在图片上方，还原你之前的背景渐变效果。

修正后代码 #

<div className="keen-slider h-screen w-screen" ref={sliderRef}>
  {plays.map(({ id, body, banner_image, union_member, title, slug }) => (
    <div
      key={id}
      className="keen-slider__slide w-full h-full flex flex-col justify-center max-w-screen-xl mx-auto"
    >
      <Container className="relative w-full h-full">
        {/* 旧版本next/image保留layout="fill"，13+App Router版本用fill属性即可 */}
        <Image
          src={getMedia(banner_image)}
          alt={title}
          layout="fill"
          className="-z-10 object-cover"
        />
        {/* 渐变蒙层，还原原有效果 */}
        <div className="absolute inset-0 bg-[rgba(15,41,55,0.65)] -z-0"></div>
        <h1 className="text-secondary text-5xl lg:text-7xl">{title}</h1>
        <div className="text-white mt-5 sh1">{union_member?.title}</div>
        <div className="text-secondary mt-5 mb-16 text-xl font-light lg:w-3/4">
          <CustomMarkdown body={body} />
        </div>
        <Button to={`${Routes.WHATS_ON}/${slug}`}>Read More</Button>
      </Container>
    </div>
  ))}
</div>

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