在particle.js脚本（Z-index）上放置按钮和链接 [英] Putting buttons and links over particles.js script (Z-index)

问题描述

我尝试使用 particles.js 脚本，因此这些粒子将浮动在整个页面上（带有透明背景）。我需要拉取粒子上面的一些链接和按钮，以便它们可以被点击。

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.

关于链接，我可以将大的C元素放在大的B元素上，而在大的C元素上有小的b元素？

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?

我想的是相对的意思是z-index相对于其父，如果我将所有的元素设置为绝对的，显示小的b在大的C是可能的，但它不是。可以为我解释吗？

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>

推荐答案

我建议的是， -index为 a （例如 z-index：9999; ），但确保 a 没有较小的z-index值，因为元素的z-index将受其父项设置的值的限制。

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.

因此，对于您的问题我能够将大的C元素放在大的B元素上，而在大的C元素上有小的b元素？是否，因为您的小b元素的z-index将受其父元素（即大B元素）和大B元素低于C元素的限制。

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.

这是一个工作示例，其中包含 .container 在链接工作时显示在粒子下面。重要的是，您应该具有：

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

并确保父级（在这种情况下， .container ）必须具有9999或更大的z-index值（或大于模式的z-index的任何值），否则将限制

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.

如果你有按钮，那么按钮就会被点击。与固体背景，我建议设置样式在一个伪元素为一个具有较低的z-index允许模式出现在其上，同时保持可点击性 a 链接本身。

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.

这篇关于在particle.js脚本（Z-index）上放置按钮和链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！