ParticleJS is not allowing clicks though its running on the background - html

Question

I have a simple page in which I want particle js animation at the background and have a button and few anchors for user to click. However, when I add particle js to a particular div, which is parent, I am not able to click the button or the anchors. I did try changing the z-index of them to higher number(z-index:2000), that didn't help either.
This is the code:
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

This should resolve your issue:
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%;
}}