Как сделать так, чтобы html-раздел переместился вверх, толкая контейнер внизу экрана - PullRequest
Новая
       8

Как сделать так, чтобы html-раздел переместился вверх, толкая контейнер внизу экрана

0 голосов
/ 20 мая 2018

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

Это содержимое основного контейнера без нижнего колонтитула и поляпеременные.Если бы кто-то мог помочь мне понять, почему класс «контейнер-форма» занимает весь экран, это было бы очень полезно.

1 Ответ

0 голосов
/ 20 мая 2018

Я бы не подумал, что это странное поведение, элемент canvas следует за потоком документов, поэтому, поскольку он позиционируется после .container-form the canvas, он появится после it,(вы можете увидеть это в исходном 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;
}
...