Question

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

关于link，我是否可以放大＆＃34; C＆＃34;元素超过＆＃34; B＆＃34;元素虽然很小＆＃34; b＆＃34;大元素＆＃34; C＆＃34;元件？

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

<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将受其父元素设置的值的限制。

所以对于你的问题“我能在大”B“元素上加上大”C“元素而在大”C“元素上加上小”b“元素吗？”，答案是否，因为您的小“b”元素的z-index将受其父级限制，这是大“B”元素，而大“B”元素位于“C”元素之下。

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

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

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

如果您的按钮具有纯色背景，我建议在具有较低z-index的a的伪元素上设置样式以允许模式显示在其上，同时保持{{1的可点击性链接本身。

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