How can I add an overlay over a Gatsby Static Image Component?

Question

Hey it's my first time posting and I am a pretty new web developer.

I am trying to use Gatsby static image component to show an image and then overlay that image with a div element to write over the picture. I am using a styled component to with position absolute, however, that div isn't going over my picture but instead going to my foooter component.

Down the line, once I get the basic layout of my page done, then I will transfer the images to my sanity cms to host the images and query the images with graphql.

This is what I have so far:

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

const StyledHome = styled.div`
  display: flex;
  gap: 2rem;
  position: absolute;
  flex-direction: row;
  margin: 2rem 0;
`;

const HomeTextContainer = styled.div`
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: 50%;

`;

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

Answer 1

What is happening is that your absolute positioned element is relative to the parent, in this case, the parent is the body (or the <div id="__gatsby">) so it's appearing from the bottom of the page. It has nothing to do with Gatsby/React, it would happen the same using standard HTML.

What you need to do, is to wrap the whole set inside a relative element, so the absolute fading-in element will be positioned relative to that.

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

const StyledHome = styled.div`
  display: flex;
  gap: 2rem;
  position: absolute;
  flex-direction: row;
  margin: 2rem 0;
`;

const HomeTextContainer = styled.div`
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: 50%;
`;

const RelativeElement = styled.div`
  position: relative;
`

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

There's a lack of containers and wrappers but get the idea and tweak it as you wish.