将按钮和链接放在 particles.js 脚本上（Z-index）

Question

我正在尝试使用 particles.js 脚本，因此粒子将漂浮在整个页面上（透明背景）。我需要将一些链接和按钮拉到粒子上方，这样它们就可以点击了。

关于 link，我能否将大 "C" 元素放在大 "B" 元素之上，同时将小 "b" 元素放在大 "C" 之上元素?

我在想的是，相对意味着相对于其父级的 z-index，而如果我将所有元素设置为绝对元素，则可以在大 "C" 上显示小 "b"，但事实并非如此。谁能帮我解释一下？

<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

位置不是指 z-index。它指的是屏幕上的 x,y 位置。了解 css 位置属性 here .

z-index 就是z轴上的绝对位置。因此，较高的指数叠加在较低的指数之上。

Position 在 div 之外确实对 divs 的 z 轴有影响，因为不同的值意味着不同的渲染顺序。如果您在您提供的页面上打开 chrome 开发人员工具并将 A 从静态更改为相对，则可以看到此效果。

尽管 A 的索引为 37，但它会在 B 之上，因为它在 A 之后呈现。为了使 z-index 可靠地工作，您应该将它们堆叠在一起。

如果您打开 codepen 粒子示例并打开 chrome 开发人员工具，您可以看到单击详细信息时 FPS 框的行为有何异常。这是因为它在 particle.js div.

之外

总而言之，如果您想查看发生了什么，请使用 chrome 中的开发人员工具之类的工具。 Firefox、Opera 和 IE 都有类似的工具。

这是 codepen 上的一个工作示例。将 class 添加到您的 css 并将 div 放在页面上：

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

Answer 2

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

所以对于你的问题“我能否将大 "C" 元素放在大 "B" 元素之上，同时将小 "b" 元素放在大 [=34] 之上=] element?"，答案是 no 因为你的小 "b" 元素的 z-index 会被它的父元素限制，也就是大元素"B" 元素，那个大的 "B" 元素在 "C" 元素下面。

Here's a working sample，在粒子下方显示 .container，同时让 link 工作。重要的是你应该有这个：

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

并确保父级（在本例中为 .container）的 z-index 值必须为 9999 或更大（或大于模式的 z-index 的任何值），否则限制 a 的 z-index，如果它低于图案的 z-index，按钮将无法点击。

如果您有纯色背景的按钮，我建议为 a 的伪元素设置样式，z-index 较低，以允许在其上显示图案，同时保持 a 的可点击性=11=] link 本身。

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