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

Question

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

关于link，我能否将大“C”元素放在大“B”元素上，同时将小“b”元素放在大“C”元素上？

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

<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

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

所以对于您的问题“我能否将大“C”元素放在大“B”元素上，同时将小“b”元素放在大“C”元素上？”，答案是 no 因为你的小“b”元素的 z-index 将受到其父元素的限制，即大“B”元素并且那个大“B”元素低于“C”元素。

Here's a working sample 和 .container 显示在粒子下方，同时链接也可以正常工作。重要的是你应该拥有这个：

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

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

如果您有纯色背景的按钮，我建议将样式设置在 a 的伪元素上，具有较低的 z-index 以允许图案出现在其上，同时保持 a 链接本身的可点击性.

Answer 2

位置不参考 z-index。它指的是屏幕上的 x,y 位置。阅读 css 位置属性 here 。

z-index 只是 z 轴上的绝对位置。因此，较高的索引叠加在较低的索引之上。

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

虽然 A 的索引为 37，但它会高于 B，因为它是在 A 之后渲染的。要使 z-index 可靠地工作，您应该将它们相互堆叠。

如果您打开您的 codepen 粒子示例并打开 chrome 开发人员工具，您会看到如果您单击详细信息，FPS 框的行为会很奇怪。这是因为它在particle.js div 之外。

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

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

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