CODEWITHSUNDEEP
javascripthtmlcssparticles.js
leo
leo

Reputation: 71

Particle js hiding web elements below it

I am using particle js as a background image.Now 

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

I have to set position attribute of .text as absolute. Otherwise the section remains hidden. I don't seem to understand why others become hidden. I can't use absolute as it will break my code. Below is the css. Only if I set .text as position:absolute it will display

#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>

Upvotes: 1

Views: 784

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

You are using divs which by default have layout but with no contents have no size. You also position the right of one element so the text is off screen. You can then fix that by right align of the text in the div. Here I put two examples to help understand the differences, one with no content as you have and one with a right aligned text.

I put some borders on just so you have a visual of the elements.

#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>

Second example

#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>

Upvotes: 0

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

You are facing this issue possibly because of heighr z-index value for #particle-js

You can do it by either making position: absolute; for #particle-js and/or increasing the z-index for .text

To understand more about positions please check this link

Upvotes: 1

Related Questions