title: How do I get one component "below" another in React?
body: <p>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).</p>
  
  <pre><code>class BlackBox extends React.Component {
      render() {
          return (&lt;div id="blackbox"&gt;&lt;/div&gt;);
      }
  }
  
  class SomeText extends React.Component {
      render() {
          return(&lt;div id="sometext"&gt;Hello&lt;/div&gt;);
      }
  }
  
  class App extends React.Component {
      render() {
          return(
              &lt;div&gt;
                  &lt;BlackBox/&gt;
                  &lt;SomeText/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Here is the CSS code to make the BlackBox full screen:</p>
  
  <pre><code>#blackbox {
      background-color: #00000;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      position: absolute;
  }
  </code></pre>
  
  <p>Why does the BlackBox cover the SomeText?</p>