javascript - how to put hello component under navbar? particles taking whole screen

Question

I dont know why particles is taking the whole screen, I cant put that hello text right under the navbar. Here's code for this:

App.js

class App extends Component{

render(){
    return (
      <div className="App">
        <Particles className='particles' params={particlesOptions} />
        <NavigationBar />
        <Header />
      </div>

this is the app.css

.particles {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

This is the Navbar

const NavigationBar = () => {
return(

      <Navbar className="top-nav pa2 br2  " expand="sm" fixed="top" >
         <Image className="top-logo " src={logo} /> 
            <Nav className="fw9 f3 fl w-90 ttc flex justify-center  " >
                <Nav.Link className=" grow" href="#home">Home</Nav.Link>
                <Nav.Link className=" grow" href="#features">About Us</Nav.Link>
                <Nav.Link className=" grow" href="#pricing">Services</Nav.Link>
                <Nav.Link className=" grow" href="#pricing">Our Team</Nav.Link>
                <Nav.Link className=" grow" href="#pricing">Become an investor</Nav.Link>
                <Nav.Link className=" grow" href="#pricing">contact</Nav.Link>
             </Nav>
        </Navbar>
    )

}

If i put position:fixed or absolute, I get this:

This is navigation.css:

.top-logo{
  position: relative;
  right: -100px;
  width: 150px ;
  height: 150px;
}

.top-nav{
  align-content: flex-start;
  background: linear-gradient(0deg, rgba(34,193,195,0) 0%, rgba(45,253,92,0.8869922969187675) 100%);
} 

this is index.css:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: linear-gradient(0deg, rgba(0,97,14,0.8981967787114846) 0%, rgba(0,16,92,1) 100%);
}

Answer 1

Set position: absolute or position: fixed for your .particles, depending on which one you want.

.particles {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

Without it, the particles element is still in the normal flow of the document, meaning that it will take up the space from its sibling elements.