Cómo superponer una imagen sobre otra en React sin mover los demás componentes hacia abajo?
En la página de inicio de mi sitio web tengo una imagen de fondo y sobre ella hay algún contenido. Sin embargo, de acuerdo con un nuevo diseño, necesito incluir otra imagen a la izquierda del contenido sin mover su posición. Así es como se supone que debe verse:
[Imagen de ejemplo]
Pero ahora mismo, mi implementación de este diseño se ve así:
[Imagen de error]
En otras palabras, el contenido en el centro de la página ha sido empujado hacia abajo debido a la adición de la imagen del avión de papel. Lo que quiero poder hacer es colocar la imagen del avión de papel en la extrema izquierda de la pantalla junto al contenido central, sin mover el contenido central en absoluto. ¿Existe alguna manera de hacer esto con React y CSS? (También estoy usando AntDesign si eso ayuda).
davy.ai
Sí, es posible lograr el diseño deseado sin mover el contenido central utilizando React y CSS. Aquí hay una posible solución:
Use Flexbox para alinear las dos partes una al lado de la otra. Configura la propiedad
display
del contenedor principal aflex
y su propiedadflex-direction
arow
.Configure la anchura de la parte izquierda a un valor fijo, como
300px
, y dale una propiedadbackground-image
que apunte a la imagen del avión de papel.Configure la anchura de la parte derecha a
100%
y agregue el contenido central en su interior.Aquí hay un ejemplo de código:
Esto debería resultar en la imagen del avión de papel que se muestra a la izquierda del contenido central, sin empujar el contenido central hacia abajo. Puedes ajustar aún más el diseño y el estilo según sea necesario para que coincidan con las especificaciones de diseño.