javascript - 粒子js隐藏它下面的网页元素

Question

我正在使用粒子 js 作为背景图像。现在

    <div id="particles-js"></div>
 <div class="text">
    <h1>Particles Background</h1>
 </div>

我必须将 .text 的位置属性设置为 absolute。否则该部分将保持隐藏状态。我似乎不明白为什么其他人会隐藏起来。我不能使用 absolute 因为它会破坏我的代码。下面是CSS。只有当我将 .text 设置为 position:absolute 时，它才会显示

#particles-js {
  position: relative;
  width: 100%;
  height: 100%;
  background: grey;
}

.text {
  position: relative;
  top: 50%;
  right: 50%;
}

<div id="particles-js"></div>
<div class="text">
  <h1>Particles Background</h1>
</div>

Answer 1

您遇到此问题可能是因为高度 z-index #particle-js 的值

您可以通过制作 position: absolute; 来做到这一点对于 #particle-js和/或增加 z-index对于 .text

了解更多职位please check this link