z-index не работает при попытке разместить формы друг над другом

#css #bootstrap-4 #z-index

#css #bootstrap-4 #z-index

Вопрос:

Я создаю страницу входа и страницу регистрации для своей программы, и предполагается, что они оба должны быть уложены друг на друга, но один из них не должен отображаться. Проблема, с которой я сталкиваюсь, заключается в том, что они не могут накладываться друг на друга. Я видел кого-то, кто сказал попробовать использовать position: absoloute но я попробовал это, и формат всего веб-сайта испортился, так что, возможно, это не тот метод. Я использую классы boostrap с некоторыми из них, если это вообще поможет.

 <div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<h1 class="burning_text">WELCOME!</h1>
<div id="main-menu" class="container-fluid">
    <div class="row">

        <div class="col"></div>

        <div class="col" id="outer_container">

            <div id="main_container">

                <form id="login_form" class="form-horizontal bg-secondary animate__animated" action="javascript:void(0);">
                    <div class="row">
                        <div class="row form-group" style="position:relative; left:10%;">
                            <label class="temporary control-label">Name:</label>
                            <input id="login_name_input" class="form-control" type = "text" required maxlength="40" placeholder="username">
                        </div>


                        <div class="row form-group" style="position: relative; left: 10%">
                                <label class="temporary control-label">Password:</label>
                                <input id="login_password_input" class="form-control" type = "password" required maxlength="40" placeholder="password">
                                <button id="login_alter_button" type="button" style="position: relative; bottom: 35%; left: 100%; height: 40px;"><i class="fas fa-eye-slash"></i></button>
                        </div>


                        <div class="row form-group">
                            <button class="btn btn-info" id="login_submit_button" style="margin: 40px; position: relative; top: 50%; right:130%;">login <i class="fas fa-door-open" style="font-size: 48px;"></i></button>
                        </div>

                        <div class="row">
                            <button class="btn btn-primary" id="switch_signup_button" type="button" style="position: relative; left: 207%; font-size: 15px; height: 30px;">switch to signup <i class="fas fa-sign-in-alt"></i></button>
                        </div>


                    </div>

                    
                </form>







                <form id="signup_form" class="form-horizontal bg-primary animate__animated" action="javascript:void(0);">
                    <div class="row">
                        <div class="row form-group" style="position:relative; left:10%;">
                            <label class="temporary control-label">Name:</label>
                            <input id="signup_name_input" class="form-control" type = "text" required maxlength="40" placeholder="username">
                        </div>


                        <div class="row form-group" style="position: relative; left: 7%">
                            <div class="col-10">
                                <label class="temporary control-label">Password:</label>
                                <input id="signup_password_input" class="form-control" type = "password" required maxlength="40" placeholder="password">
                            </div>
                            <div class="col-2">
                                <button id="signup_alter_button" type="button" style="position: relative; top: 45%; right: 90%; padding: 5px;"><i class="fas fa-eye-slash"></i></button>
                            </div>
                        </div>


                        <div class="row form-group">
                            <button class="btn btn-info" id="signup_submit_button" style="margin: 40px">signup <i class="fa fa-user-plus" style="font-size:48px;"></i></button>
                        </div>

                        <div class="row">
                            <button class="btn btn-secondary" id="switch_login_button" type="button" style="position: relative; left: 93%; top: 80%; font-size: 15px; height: 30px;">switch to login <i class="fas fa-user"></i></button>
                        </div>


                    </div>

                    
                </form>



            </div>


        </div>

        <div class="col"></div>

    </div>



</div>
  

В настоящее время происходит то, что они складываются друг на друга display: block каким-то образом.
Вот классы CSS, которые я использую (те, которые я создал сам, и те, которые, вероятно, полезны в этой ситуации):

 #login_form
{
    left: 100%;
    font-size: large;
    font-family: Rockwell;
    display: block;
    
}

#signup_form
{
    font-size: large;
    font-family: Rockwell;
    display: block;
    position: relative;
    z-index: -1;
    bottom: 50%;
}
  

введите описание изображения здесь

Ответ №1:

У меня нет полного CSS, но они складываются для меня. Если мой ответ не сработает, пожалуйста, дайте мне знать.

Отредактировано

другое решение использует display: none; , чтобы заставить вторую форму исчезнуть и display:block; снова изменить ее на использование JavaScript при переключении между формами, я думаю, что это лучшее решение.

Также, пожалуйста, помните, что элементы с абсолютным расположением удаляются из потока

 .main_container {
    position: relative;
}

#login_form {
    font-size: large;
    font-family: Rockwell;
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

#signup_form {
    font-size: large;
    font-family: Rockwell;
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    left: 0;
}
  

Комментарии:

1. Так что же произошло? для меня они перекрываются, потому что у меня есть демо, можете ли вы показать мне, что у вас есть в вашем коде?

2. Я не на 100% уверен, что вы подразумеваете под «удалением из потока»

3. Абсолютно позиционированные элементы полностью удаляются из потока документов, и, следовательно, их размеры не могут изменять размеры их родителей.

4. Проверьте страницу MDN: developer.mozilla.org/en-US/docs/Web/CSS/position/#absolute

5. Что ж, что-то произошло, но основная проблема сейчас заключается в том, чтобы сделать что-то еще в программе, что не имеет отношения к этому вопросу.