React using CSS positioning with different components - css

Question

I'm trying to set up a landing page with a hero image as the background. I'm attempting to have two columns next to each other around the center of the screen. My plan was to use the body tag in CSS to set the background-image and set position: relative so that I could later use position: absolute for the columns with text in them to be in the center of the image/screen. However, I'm using React and I used the index.js component to set it to relative and to set the background and I then added a Home component That will contain the rest of the landing page, beginning with the two columns that must be set with position absolute.
In index.js styles component
body{
background-image: url(../src/assets/HeroImage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
In Home styles component
.heroimage-text-container{
background-color: red;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
What happens by trying it this way is that the heroimage-text-container disappears when the position is set to absolute. I know this would not be happening if this was all within the same component so I'm hoping someone here could help me fix this. Thank you.

Answer 1

You should use flex box in this case. Absolute using the same class it will be overlapped because they will have the same properties.
body {
background-image: url("https://images.unsplash.com/photo-1506716442075-1e2e0e5b1256?ixlib=rb-1.2.1&auto=format&fit=crop&w=1343&q=80");
height: 100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.App {
font-family: sans-serif;
text-align: left;
display: flex;
flex-direction: row;
}
.heroimage-text-container {
background-color: red;
height: auto;
margin: 10px;
padding: 10px;
}
Take a look at the sandbox
https://codesandbox.io/s/bold-tdd-d39oc