如何将 hello 组件放在导航栏下？粒子占据整个屏幕

如何解决如何将 hello 组件放在导航栏下？粒子占据整个屏幕

我不知道为什么粒子会占据整个屏幕，我不能把那个 hello 文本放在导航栏的正下方。代码如下：

App.js

class App extends Component{

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

这是 app.css

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

这是导航栏

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>
    )

}

如果我把位置：固定或绝对，我得到这个：

这是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%);
} 

这是 index.css：

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

解决方法

为您的 position: fixed 设置 position: absolute 或 .particles，具体取决于您想要的那个。

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

没有它，particles 元素仍处于文档的正常流中，这意味着它将占用其兄弟元素的空间。

,

我找到了。我不得不将它添加到 index.css:

background: linear-gradient(0deg,rgba(0,97,14,0.8981967787114846) 0%,16,92,1) 100%) no-repeat fixed center;