CODEWITHSUNDEEP
cssreactjsformattingreact-component
Siddu Palaparthi
Siddu Palaparthi

Reputation: 89

How to overlay one image on top of another in React without moving other components down?

So on the homepage of my site, I have a background image, and over it, there is some content. However, as per a new design, I need to also include another image to the left of the content without moving its position. Here is how it is supposed to look like:

enter image description here

But right now, my implementation of this design looks like this:

enter image description here

In other words, the content at the center of the page has been pushed down due to the addition of the paper airplane image. What I want to be able to do is put the paper place image at the very left of the screen next to the central content, without moving the central content at all. Is there any way to do this with React and CSS? (I am also using AntDesign if that helps)

Upvotes: 2

Views: 11269

Answers (2)

Awshaf Ishtiaque
Awshaf Ishtiaque

Reputation: 931

I positioned the images using a parent container as relative and the inner divs as position:absolute;.
For example, if the parent div/container is the 100vh & 100vw (with position absolute), setting the inners divs position with these CSS attributes will centre the inner divs:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Full example can be found here from W3School.

Upvotes: 0

Lab
Lab

Reputation: 49

You can approach this issue in 2 ways

  1. set the position of the other image you want to be at the leftside to absolute.

  2. If you want the 2 images to be background images then you can use multiple background-images and specify the background-position separately too. e.g

.background-image: url("path to image 1"), url("path to image 2");background-position: center center, left bottom;

Upvotes: 3

Related Questions