如图登入弹框和页面出现了混合叠加效果

相关代码如下:
借入
有域名轻松借贷
免各种材料审核
有效利用闲置资产
安全、快捷到账
a {
text-decoration: none;
outline: none;
}
ul li {
list-style-type: none;
}
.login-modal {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.login-overlay {
background-color: #000;
opacity: 0.25;
width: 100%;
height: 100%;
z-index: 22;
}
.login-modal-main {
width: 370px;
margin: 0 auto;
position: absolute;
background-color: #fff;
border-radius: 5px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
left: 50%;
top: 50%;
padding: 0 38px 10px 38px;
}
.login-header {
height: 50px;
border-bottom: 1px solid #e2e2e2;
position: relative;
font-size: 16px;
}
.login-header a {
line-height: 50px;
text-decoration: none;
outline: none;
}
.switch_btn_focus {
border-bottom: 2px solid #FEB91E;
}
.cue {
width: 100%;
padding: 8px 0;
text-align: center;
border: 1px solid #eee;
margin-top: 20px;
color: green;
}
.inputStyle {
height: 34px;
line-height: 34px;
border: 1px solid #D7D7D7;
background: #fff;
color: #333;
font-size: 16px;
width: 100%;
}
input {
-webkit-appearance: none;
}
.submit-btn {
display: block;
border: none;
background-color: #38f;
padding: 10px 0;
width: 100%;
cursor: pointer;
text-align: center;
font-size: 16px;
color: white;
border-radius: 3px;
margin-top: 20px;
}
.get-captcha {
background-color: #38f;
border: medium none;
color: white;
cursor: pointer;
font-size: 14px;
height: 34px;
line-height: 34px;
text-align: center;
width: 110px;
float: right;
margin-top: 20px;
border-radius: 3px;
}
.reg_form {
padding: 0;
}
求大神指出我的错误!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
为 CSS 样式 .login-modal 添加 z-index 属性,使其层级大于 #borrowIn 元素。