粒子 js 隐藏在其下方的 Web 元素

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

您面临此问题可能是因为 heighr z-index 值#particle-js

您可以通过为#particle-js制作position: absolute;和/或增加z-index来.text

要了解有关职位的更多信息，请查看此链接

Answer 2

您正在使用默认情况下具有布局但没有内容的div 没有大小。 您还可以放置一个元素的右侧，以便文本不在屏幕外。 然后，您可以通过div 中文本的右对齐来修复此问题。 在这里，我举了两个例子来帮助理解差异，一个没有内容，另一个是右对齐的文本。

我放了一些边框，这样你就可以看到元素。

#mycontainer{border:solid lime 1px;}
#particles-js {
  position: relative;
  width: 100%;
  height: 100%;
  background: grey;
  border: solid 1px blue;
}
.text {
  position: relative;
  top: 50%;
  right: 50%;
  border: solid 1px red;
}

<div id="mycontainer">
  <div id="particles-js">cheese&nbsp;</div>
  <div class="text">
    <h1>Particles Background</h1>
  </div>
</div>

第二个例子

#mycontainer {
  border: solid lime 1px;
  width: 100%;
  height: 100%;
}
#particles-js {
  position: relative;
  width: 100%;
  height: 100%;
  background: grey;
  border: solid 1px blue;
}
.text {
  position: relative;
  top: 50%;
  right: 50%;
  border: solid 1px red;
  text-align:right;
}

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