问题描述
我不知道为什么粒子会占据整个屏幕,我不能把那个 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;