如何将 html 部分推到顶部将容器推到屏幕底部答案

【问题标题】：How to get html section to top pushing the container to the bottom of the screen如何将 html 部分推到顶部将容器推到屏幕底部
【发布时间】：2018-05-20 04:47:27
【问题描述】：

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

我的联系表单正在做这种奇怪的事情，其中粒子被推到联系表单下方。如果我将画布用作该部分的父级，那么即使我将 z-index 设置为 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;
     }

这是没有页脚和字段变量的主容器的内容。如果有人可以帮助我弄清楚为什么“容器形式”类似乎占据了整个屏幕，那将不胜感激。

【问题讨论】：

标签： html css containers sections particles.js

【解决方案1】：

我不会认为这是一种奇怪的行为，canvas 元素会跟随文档流，因此，由于定位在.container-form 和canvas 之后，它会出现在之后它。（您可以在您提供的链接的 HTML 源代码中看到这一点）

所以，如果你想让粒子显示在表单后面，你应该让表单或画布不流动，即改变它的位置。

例如，您可以将画布定位更改为position: fixed;

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

并确保在您的 HTML 中，具有粒子的容器位于带有您的表单的容器之前，以便它显示在其后面。

在您的特定情况下，我认为您的代码可以这样工作：

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

在你的 CSS 中：

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

【讨论】：