How to get html section to top pushing the container to the bottom of the screen

Question

https://ethanykc.github.io/contact.html

My contact form is doing this weird thing where the particles are being pushed under the contact form. If i use the canvas as a parent of the section then the contact form disappears even if I set the z-index to 9999.

    <section class="fullscreen cover image-bg" id="particles-js" style="height:826px;" >
        <div class="container-form" style="background-color: transparent;" >  
            <form id="contact" action="" method="post">
            </form>
        </div>
    </section>

/*---css for form---*/
    .container-form {
          max-width:400px;
          margin:0 auto;
          position:relative;
          z-index: 9999;
     }

This is the the contents of the main container without the footer and field variables. If someone could help me figure out why the "container-form" class appears to be taking up the whole screen it would be much appreciated.

Answer 1

I wouldn't consider that a weird behavior, the canvas element is following the document flow, so, since is being positioned after the .container-form the canvas it is going to appear after it. (you can see this in the HTML source of the link you provided)

So, if you want the particles to show behind the form, you should get either the form or the canvas out of flow, i.e. change its positioning.

You can, for example, change the canvas positioning to position: fixed;

canvas{
 position:fixed;
 top: 0px;
 left: 0px;
}

And make sure your that in your HTML the container that has the particles is before the container with your form so it shows behind it.

---

In your particular case, i think your code can work in this way:

<section class="fullscreen cover image-bg" id="particles-js" style="height:826px;" >
</section>

<div class="container-form" style="background-color: transparent;" >  
     <form id="contact" action="" method="post">
     </form>
</div>

And in your CSS:

#particles-js{
 position:fixed;
 top: 0px;
 left: 0px;
}