1

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

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

我必须将 position 属性设置为.textas 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>

4

2 回答 2

1

您面临这个问题可能是因为更高的z-index价值#particle-js

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

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

于 2018-03-11T19:39:33.397 回答
0

您正在使用默认情况下具有布局但没有内容没有大小的 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>

于 2018-03-17T12:53:47.567 回答