So I am trying to create a navigation and footer in the body of the website but the particle.js keeps coming over those elements. I have tried z-index and it doesn't bring it up. The particle.js is not allowing me to touch my navigation bar or footer. Would appreciate some help.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="CSS/blog.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="index.html" >Home</a>
<a href="aboutMe.html">About Me</a>
<a href="resume.html">Resume</a>
<a href="blog.html" class="active">Blog</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div id="particles-js">
<p style="color: white; font-size: 30px;">Coming soon!</p>
</div>
<script type="text/javascript" src="js/particles.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<div class="footer">
<a href="#" target="_blank">
<img alt="LinkedIn" src="images/linkedin.png" id="linkedin">
</a>
<a href="#" target="_blank">
<img alt="Github" src="images/github.png" id="github">
</a>
</div>
</body>
</html>
CSS:
* {
text-decoration: none;
box-sizing: border-box;
}
body{
padding: 0;
margin: 0;
/*height: 100vh;*/
}
#particles-js{
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
/*width: 100%;
height: 100vh;*/
background: #8000FF;
display: flex;
justify-content: center;
align-items: center;
}
.particles-js-canvas-el{
position: absolute;
}
.topnav {
overflow: hidden;
background-color: rgb(0,0,0);
}
.topnav a {
float: left;
display: block;
color: #8000FF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-family: "Brush Script MT";
}
.topnav a:hover {
background-color: #8000FF;
color: white;
}
.topnav a.active {
background-color: #8000FF;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.footer{
display: inline-flex;
width: 100%;
height: 75px;
text-decoration: none;
background-color: rgb(0,0,0);
text-align: center;
align-items: center;
z-index:999;
}
.footer [alt = "LinkedIn"],[alt="Github"]{
float: right;
width: 50px;
text-align: center;
align-items: center;
}
粒子.js：
var pJS = function(tag_id, params){
var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el');
/* particles.js variables with default values */
this.pJS = {
canvas: {
el: canvas_el,
w: canvas_el.offsetWidth,
h: canvas_el.offsetHeight
},
particles: {
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#fff'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#ff0000'
},
polygon: {
nb_sides: 5
},
image: {
src: '',
width: 100,
height: 100
}
},
opacity: {
value: 1,
random: false,
anim: {
enable: false,
speed: 2,
opacity_min: 0,
sync: false
}
},
size: {
value: 20,
random: false,
anim: {
enable: false,
speed: 20,
size_min: 0,
sync: false
}
},
line_linked: {
enable: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 3000,
rotateY: 3000
}
},
array: []
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'grab'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab:{
distance: 100,
line_linked:{
opacity: 1
}
},
bubble:{
distance: 200,
size: 80,
duration: 0.4
},
repulse:{
distance: 200,
duration: 0.4
},
push:{
particles_nb: 4
},
remove:{
particles_nb: 2
}
},
mouse:{}
},
retina_detect: false,
fn: {
interact: {},
modes: {},
vendors:{}
},
tmp: {}
};
谢谢你的协助！
use position: fixed而不是绝对的
并使用交互式 div 的 z-index 大于 1
最后，不要在 div 中保留任何显示粒子的内容。
I know Its not much understandable as you are not using React.js
but the problem you are incurring would be solved with this.
so my <Particle/>组件包含 keywords.js 文件和我的所有其他文件<div>和其他内容开始于<Navigation /> to <FaceRecognition />
如果你能看到我已经使用过一个类particles对于我的粒子组件。这是它的造型
position: fixed;
width: 100%;
z-index: -1;
}
和我所有其他的<div> have z-index超过1。
这是输出