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.