CSS颗粒的js重叠问题

Question

这里是我的个人网站的资料库：https://github.com/flakpanzer40/flakpanzer40.github.io

正如你可能会注意到，我已经使用了粒子地表示低于我的名字，图片和说明。我已经尝试过无数次重叠它们，以便粒子发生在后面，但无济于事。我试过绝对的位置，z-index，重新安排DIV等。我在CSS上很糟糕。

任何人都可以帮忙吗？

Answer 1

请添加以下样式：

.container { 
    /*other css*/ 
    position: relative; 
    z-index: 1; 
} 
.particles-js-canvas-el { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 0; 
} 

Answer 2

使用下面的代码：

HTML：

<div id="particles-js" style=""> 
    <canvas class="particles-js-canvas-el" width="1903" height="952" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"></canvas> 
    <div class="container">   
     <div class="row"> 
      <div class="col-lg-12"> 
       <img class="img-responsive" src="img/EvanRen.jpg" alt="Evan Ren" style="width:500px;height:600px;border:5px solid white;border-radius: 50%;"> 
       <div class="intro-text"> 
        <span class="name">University of Waterloo Computer Science</span> 
        <hr class="star-light"> 
        <span class="skills">Problem_solving expert - Hardworking - Passionate</span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

#particles-js { 
    width: 100%; 
    height: 100%; 
    background-color: #13717c; 
    position: relative; 
    top: 0; 
} 

重要的是，父母（#particles-js）有position: relative，以便您可以为孩子使用绝对定位。