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>

Solution 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.

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

Comments

[maioman]

you mean the way .count-particles div lays on top of canvas?

[Marek]

I want to set that particles script as my website background, but then I want to be able to click links and buttons on my website (bring them above particles script) but z-index is not working.

[Cymen]

Would github.com/jnicol/particleground do what you want?

[maioman]

look if this is what you're looking for codepen.io/maio/pen/WvEQEm

[Marek]

What I read before is that the z-index will work only for elements with position set to either relative or absolute. Is that true? Also, setting the highest possible z-index for buttons (lets say 999999) does not bring them above the particles

[Johannes Maria Frank]

That is because for some reason the div of the particles in your example is in its own div. You can either try to make all divs static, then the following divs would be rendered after and above the particles. Or you could try to put the divs inside the div with the particles. Then z-index should work.

[Marek]

If I put the whole content of my website inside the div with particles, even then the z-index does not work...To make all the divs static its to much work now. Imagine I had my website ready and then found this particles plugin. I thought it is easier to put particles on top of everything and then just put selected elements above it. But it isnt?

[Johannes Maria Frank]

.test { index: 50; top: 100px; position: absolute; } This class works on the codepen example. Edit the CSS and put your div somewhere inside the particle-js class. Add an index of 0. The text shows above the particles.