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 the particles, so they would be clickable.

Regarding to link, am I able to put big "C" element over big "B" element while having small "b" element over the big "C" element?

What I was thinking was that relative means z-index relative to its parent while if I would set all the elements to absolute, displaying the small "b" over big "C" would be possible, but it is not. Can anyone explain it for me?

<div id="A">A<div id="a">a</div></div>
<div id="B">B<div id="b">b</div></div>
<div id="C">C<div id="c">c</div></div>

Answer 1

What I would suggest is, give a high value z-index for your a (e.g. z-index:9999;) but make sure the parent elements of a do not have smaller z-index values because the z-index of an element will be limited by the value set by its parent.

So for your question "am I able to put big "C" element over big "B" element while having small "b" element over the big "C" element?", the answer is no because the z-index of your small "b" element would be limited by its parent, which is the big "B" element and that big "B" element is below "C" element.

Here's a working sample with a .container showing below the particles while having the link work as well. What matters is that you should have this :

a{
    position:relative;
    z-index:9999;
}

And make sure the parent (in this case, the .container) must have a z-index value of 9999 or greater (or any value greater than z-index of the pattern), otherwise that will limit the z-index of a and if it's lower than z-index of the pattern, the buttons won't be click-able.

If you have buttons with solid backgrounds, I would recommend setting the style on a pseudo-element for a with lower z-index to allow patterns to appear on it, while maintaining the clickability of the a link itself.

Answer 2

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;
}