8

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?

ThePumpkinMaster
  • 2,181
  • 5
  • 22
  • 31

2 Answers2

6

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>
Tim S.
  • 162
  • 7
  • How would I change the properties of html and body tags in React? I can do document.body.style.height to change the body tag, but how do I change properties of the html tag? – ThePumpkinMaster Feb 26 '18 at 23:53
  • Like this: `document.getElementsByTagName('div').style.height = "100px";`. – Tim S. Feb 26 '18 at 23:57
  • But of course it depends on what you are trying to do. 'Cause you can use css stylesheet for this, or you can use other libraries along with React (jQuery for example). – Tim S. Feb 26 '18 at 23:59
  • Perfect thanks! I actually just used CSS to change the "div" tag that the component renders. That div tag acts like an or tag anyway, so it actually worked out! Thanks!! – ThePumpkinMaster Feb 27 '18 at 00:08
  • Awesome! No problem! – Tim S. Feb 27 '18 at 00:10
0

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

Mahtab3849
  • 1