CSS Partikel Js Overlap Ausgabe

Question

Hier ist das Repository für meine persönliche Website: https://github.com/flakpanzer40/flakpanzer40.github.io

Wie Sie sehen können, werden die Partikel die ich verwendet habe unter meinem Namen, Bild und Beschreibung einfach zeigen. Ich habe es mehrmals versucht, sie zu überlappen, so dass die Partikel im Rücken passieren, aber ohne Erfolg. Ich habe absolute Positionen ausprobiert, den Z-Index, die DIVs neu arrangiert usw. Ich bin schrecklich in CSS.

Kann jemand helfen?

Answer 1

Bitte fügen Sie folgende Arten:

.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

Verwenden Sie den folgenden Code:

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; 
} 

Es ist wichtig, dass der Elternteil (#particles-js) position: relative hat, damit Sie die absolute Positionierung für die Kinder verwenden können.