时间戳

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

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

问题描述

在此处输入图像描述

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

应用程序.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>
    )

}

如果我把位置：固定或绝对，我得到这个： 在此处输入图像描述

这是导航.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%, rgba(0,16,92,1) 100%);
}

标签： javascriptreactjsreact-nativeparticles.js

解决方案

设置position: absolute或position: fixed为你的.particles，取决于你想要哪一个。

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

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

推荐阅读