How do I get one component "below" another in React?

Question

Here is my React code. I have two components: BlackBox and SomeText. I want the BlackBox to be full screen and the SomeText to be below it. I would assume that two divs in a row would render in order (either next to each other or below one another, but BlackBox in this example is completely on top of the SomeText).

class BlackBox extends React.Component {
    render() {
        return (<div id="blackbox"></div>);
    }
}

class SomeText extends React.Component {
    render() {
        return(<div id="sometext">Hello</div>);
    }
}

class App extends React.Component {
    render() {
        return(
            <div>
                <BlackBox/>
                <SomeText/>
            </div>
        );
    }
}

Here is the CSS code to make the BlackBox full screen:

#blackbox {
    background-color: #00000;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

Why does the BlackBox cover the SomeText?

Answer 1

Why does the BlackBox cover the SomeText?

Because it is absolutely positioned. And, from what I can assume, SomeText is not.

Make #blackbox position relative. You will most likely run into a problem of making it full height. It's easy to solve but requires some styling for other html elements on the page. Take a look at this for example: https://stackoverflow.com/a/4550198/7492660

Or just do this:

#block1{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
  z-index: 0;
}

#block2{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #ff4444;
  padding: 3px 8px;
  color: #fff;
  z-index: 1;
}

<div id="block1"></div>
<div id="block2">Some Text</div>