Question

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

这是没有页脚和字段变量的主容器的内容。如果有人可以帮我弄清楚为什么＆＃34;容器形式＆＃34;班级似乎占据了整个屏幕，非常感谢。

Answer 1

我不会认为这是一个奇怪的行为，canvas元素跟随文档流程，所以，因为它位于public class User extends SugarRecord<User> { String fistname; String lastname; String email; String password; String confirmpassword; public User() { } public User(String fistname, String lastname, String email, String password, String confirmpassword) { this.fistname = fistname; this.lastname = lastname; this.email = email; this.password = password; this.confirmpassword = confirmpassword; } }之后.container-form它会出现之后它。（您可以在您提供的链接的HTML源代码中看到这一点）

因此，如果您希望粒子显示在表单后面，您应该从流程中获取表单或画布，即更改其位置。

例如，您可以将画布定位更改为canvas

position: fixed;

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

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

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

在你的CSS中：

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

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

1 个答案: