如何将内容 over/on 放在 particle.js 的顶部

Question

所以我试图在网站正文中创建导航和页脚，但 particle.js 不断覆盖这些元素。我试过 z-index 但它没有显示出来。 particle.js 不允许我触摸导航栏或页脚。会很感激一些帮助。 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;
}

particle.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: {}
  };

谢谢你帮我！

Answer 1

使用position: fixed 而不是绝对

并使用 z-index 的交互式 div 到更高的东西

最后不要在显示粒子的 div 中保留任何东西..

我知道它不太好理解，因为你没有使用 React.js 但是你遇到的问题会用这个解决。

所以我的 <Particle/> 组件包含 particles.js 文件和我的所有其他 <div> 和其他内容从 <Navigation /> 到 <FaceRecognition />

如果你能看到我为我的粒子组件使用了 class particles。这是它的样式

  position: fixed;
  width: 100%;
  z-index: -1;
}

和我所有其他 <div> 的 z-index 都超过 1。这是输出

如何将内容 over/on 放在 particle.js 的顶部

How to put content over/on top of particle.js

html

javascript

css

particles.js