CODEWITHSUNDEEP
htmlreactjscss
ThePumpkinMaster
ThePumpkinMaster

Reputation: 2351

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

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?

Upvotes: 10

Views: 34178

Answers (2)

Mahtab3849
Mahtab3849

Reputation: 1

Because BlackBox is absolute. Don't specify the position for both components. This worked for me. Moreover, try another option for full screen.

Upvotes: 0

Tim S.
Tim S.

Reputation: 162

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>

Upvotes: 6

Related Questions