Мои частицы с абсолютным положением. js покрывает мой относительный див

Question

https://codepen.io/AnonymousCaptain/pen/MWavMWm

<div class="outer-container">                  
  <div id="particles-js">
    <div class="your-content">
          <article id="3" class="bg-dusk transition md:group-hover:opacity-50 md:hover:opacity-important md:hover:scale-11/10x my-8">
            <h3 class="mt-8 text-lg font-semibold leading-tight text-zenith">3</h3>
            <p class="mt-8">Lorem ipsum dolor sit amet, et suspendisse mauris molestie, libero wisi a nulla, laoreet dolor tortor orci, amet debitis enim ultricies fermentum.</p>
          </article>
    </div>
  </div>
</div>

Пожалуйста, помогите мне исправить наложение. Кроме того ... я хотел бы знать, если вы думаете, что я должен вместо этого перейти на компонент частиц на основе Vue?

Answer 1

#particles-js {
  position: relative;
}

Это исправит. Но, как рекомендует Ученду ... путь к большому количеству кода в примере ..