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>
</>
)
}
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.