如何为Gatsby的StaticImage组件添加叠加覆盖层？

问题核心 #

position: absolute的元素默认以整个文档流作为定位基准，只有最近一级设置了非static定位属性的父元素才能成为它的定位参照。你当前将StaticImage和覆盖层组件平级放在空片段下，没有共同的相对定位父容器，因此覆盖层会相对整个页面定位，出现偏移。

修复后代码 #

import React from "react"
import styled from "styled-components"
import { StaticImage } from "gatsby-plugin-image";

// 新增相对定位父容器作为定位基准
const ImageWrapper = styled.div`
  position: relative;
  width: 100%;
`

const StyledHome = styled.div`
  display: flex;
  gap: 2rem;
  position: absolute;
  // 以下配置实现文字完全居中，可按需调整位置
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  flex-direction: row;
`;

const HomeTextContainer = styled.div`
  width: 100%;
  text-align: center;
  color: #fff;
`;

export default function IndexPage()  {
  return (
    <ImageWrapper>
      <StaticImage
          src="../images/picturesWeb.png"
          alt="Website Example"
          placeholder="traceSVG"
          layout="fullWidth"
         />
      <StyledHome>
          <HomeTextContainer>
            <h2>Hello</h2>
          </HomeTextContainer>
      </StyledHome> 
    </ImageWrapper>
  )
}

修改说明 #

• 新增ImageWrapper容器包裹图片和覆盖层，设置position: relative作为绝对定位元素的参照基准，确保覆盖层只会在图片范围内偏移
• 调整StyledHome的定位参数实现居中，你可以自行修改top/left/right/bottom的值调整文字在图片上的展示位置
• 增加z-index配置确保文字层始终在图片上层
• 后续迁移到Sanity CMS托管图片时，仅需替换StaticImage为Sanity返回的图片组件即可，这套定位逻辑无需调整

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