Hola, es la primera vez que publico y soy un desarrollador web bastante nuevo.
Estoy tratando de usar el componente de imagen estática Gatsby para mostrar una imagen y luego superponer esa imagen con un elemento div para escribir sobre la imagen. Estoy usando un componente con estilo con posición absoluta, sin embargo, ese div no está revisando mi imagen, sino que va a mi componente de pie de página.
Más adelante, una vez que termine el diseño básico de mi página, transferiré las imágenes a mi sanity cms para alojar las imágenes y consultarlas con graphql.
Esto es lo que tengo hasta ahora:
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> </> ) }Lo que sucede es que su elemento de posición absoluta es relativo al padre, en este caso, el padre es el body (o el <div id="__gatsby"> ), por lo que aparece en la parte inferior de la página. No tiene nada que ver con Gatsby/React, pasaría lo mismo usando HTML estándar.
Lo que debe hacer es envolver todo el conjunto dentro de un elemento relativo, de modo que el elemento de fundido de entrada absoluto se posicione en relación con eso.
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> ) }Faltan contenedores y envoltorios, pero hazte una idea y ajústala como quieras.