html - ParticleJS 不允许点击，尽管它在后台运行

Question

我有一个简单的页面，我希望在后台使用粒子 js 动画，并有一个按钮和几个锚点供用户单击。但是，当我将粒子 js 添加到作为父级的特定 div 时，我无法单击按钮或锚点。我确实尝试将它们的 z-index 更改为更高的数字（z-index:2000），但这也没有帮助。

这是代码： https ://plnkr.co/edit/JMYVXu6I3G7kdKUWN7tc?p=preview

/* Styles go here */

body{
  color:white;
}

#home {

  color:white;
    padding-bottom: 2em;
    min-height: 100vh;

    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-image: url("http://www.melbourne.vic.gov.au/SiteCollectionImages/1200-buildings-898x381.jpg");
    /* fallback */
    background-image: linear-gradient(to bottom, rgba(0, 67, 105, 0.5) 0%, rgba(0, 67, 105, 0.5) 100%), url("http://www.melbourne.vic.gov.au/SiteCollectionImages/1200-buildings-898x381.jpg"g);
}

.home-icon {
    width: 2em;
    height: 2em;
    text-align: center;
    margin: 0.5em;
    font-size: 2em;
    color: #f5f5f5;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    padding: 0.5em;
    transition: all .5s ease;
    z-index:1040
}

.home-icon:hover {
    border: 2px solid #00B9DA;
    color: #00B9DA;
}

.particles-js-canvas-el {
    top: -200px;
    position: relative;
    height: 200px;
}

Answer 1

这应该可以解决您的问题：

HTML：

<!-- particles.js container -->
<div id="particles-js">
  <div class="test">AAA</div>
</div>

CSS：

canvas {
  index: 0;
  display: block;
  vertical-align: bottom;
}

.test { 
  index: 50;
  top: 100px;
  position: absolute;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}}