Putting buttons and links over particles.js script (Z-index)

Question

I am trying to use particles.js script, so the particles will float over the entire page (with transparent background). I need to pull some of the links and buttons above th

Answer 1

Position does not refer to the z-index. It refers to the x,y position on the screen. Read about the css position property here .

z-index is just the absolute position on the z-axis. Therefore a higher index stacks over a lower.

Position does nevertheless have an effect on z-axis for divs outside of your div, as different values imply different rendering orders. You can see this effect if you open the chrome developer tools on the page you supplied and change A from static to relative.

Although A has an index of 37 it will be above B because it is rendered after A. For z-index to work reliable you should stack them in each other.

If you open your codepen particle example and open the chrome developer tools you can see how the FPS box behaves weird if you click on details. This is for it is outside the particle.js div.

In summary, if you want to see what is going on, use something like the developer tools in chrome. Firefox, Opera and IE have similar tools.

Here is a working example on codepen. Add the class to your css and put the div on the page:

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