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

解决方法

我没有完整的CSS，但它们可以为我叠放。如果我的回答不起作用，请告诉我。

已编辑

另一种解决方案是使用display: none;使第二个表单消失，并在切换表单之间时再次使用 javaScript 将其重新更改为display:block;，我认为这是最好的解决方案。

还请记住，绝对定位的元素已从流程中删除

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