Question

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

.text

我必须将absolute的排名属性设为absolute。否则该部分仍然隐藏。我似乎不明白为什么其他人会被隐藏起来。我无法使用.text因为它会破坏我的代码。下面是css。只有将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>

{{1}}

Answer 1

您可能因z-index

的#particle-js值更高而面临此问题

您可以为position: absolute;制作#particle-js和/或增加z-index的{{1}}

了解有关职位please check this link

的更多信息

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>

粒子js隐藏在它下面的web元素

2 个答案: