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

Question

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

我的联系表正在做这种奇怪的事情，粒子被推到联系表下面。 如果我使用 canvas 作为该部分的父级，那么即使我将 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;
     }

这是没有页脚和字段变量的主容器的内容。如果有人能帮我弄清楚为什么 "container-form" class 似乎占据了整个屏幕，我们将不胜感激。

Answer 1

我不认为这是一种奇怪的行为，canvas 元素遵循文档流，因此，由于位于 .container-form 之后，所以 canvas 它会在之后出现。 （您可以在您提供的 link 的 HTML 来源中看到这一点）

因此，如果您希望粒子显示在表格后面，您应该让表格或 canvas 脱离流动，即改变其位置。

例如，您可以将 canvas 定位更改为 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;
}