-1

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

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

4

1 回答 1

0

我不会认为这是一种奇怪的行为，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;
}
于 2018-05-20T05:15:56.517 回答