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

Question

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

关于链接,我能在大"B"元素上放置大的"C"元素,而在大"C"元素上有小的"b"元素吗？

我所想的是相对意味着相对于其父亲的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"元素上而在大"C"元素上有小"b"元素吗？ ",答案是否定的,因为你的小z-index "b"元素将受其父元素的限制,父元素是大"B"元素,大"B"元素位于"C"元素之下.

这是一个工作样本,.container在链接工作的同时显示在粒子下方.重要的是你应该有这个:

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

并确保父项(在本例中为.container)必须具有9999或更高的z-index值(或任何大于模式的z-index的值),否则将限制z-index a和如果它更低比模式的z-index,按钮不可点击.

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