#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. Что ж, что-то произошло, но основная проблема сейчас заключается в том, чтобы сделать что-то еще в программе, что не имеет отношения к этому вопросу.