【Web前端问题】页面叠加问题
如图登入弹框和页面出现了混合叠加效果
相关代码如下：
页面html
<div id="borrowIn" style="width:586px;background-color: #fff;margin-bottom:10px;" class='pull-right'> <h3>借入</h3>
<div style='padding:20px;position:relative;padding-bottom:20px;'>
<div style="width:240px;float:left;padding-bottom:70px;">
<p>有<span>域名</span>轻松借贷</p>
<p><span>免</span>各种材料审核</p>
<p>有效利用<span>闲置</span>资产</p>
<p style='padding-bottom:20px'><span>安全、快捷</span>到账</p>
</div>
<div style="width:140px;float:right">
<img src="./img/icon1.png" style='margin-top:40px;'>
</div>
<div style="border-bottom:2px dashed #D3D0D0" class="clearfix"></div>
</div>
<center>
<button type='button' class='btn' style="outline:none">立即申请</button>
</center>
</div>
登入框html
<div class="login-modal clearfix"> <!-- mask -->
<div class="login-overlay"></div>
<!-- 登入框 -->
<div class="login-modal-main container">
<!-- header -->
<div class="login-header">
<div class="switch row text-center" id="switch">
<div class="switch_btn_focus col-xs-6" id="login" style="cursor: pointer;"><a href="javascript:void(0);" tabindex="7">快速登录</a></div>
<div class="col-xs-6" id="register" style="cursor: pointer;"><a href="javascript:void(0);" tabindex="8">快速注册</a></div>
</div>
</div>
<!--登录-->
<div id="web_qr_login" style="display: block;">
<form id="login-form" accept-charset="utf-8" method="post">
<ul class="reg_form">
<div id="login-tip" class="cue">请登录</div>
<li>
<label for="login-tel" width="24px" height="24px"></label>
<input type="text" id="login-tel" name="tel" maxlength="16" class="inputStyle" placeholder="用户名">
</li>
<li>
<label for="login-password"></label>
<input type="password" id="login-password" name="password" maxlength="10" class="inputStyle" placeholder="密码">
</li>
<li>
<button class="submit-btn" type="submit">登录</button>
</li>
</ul>
</form>
<!--登录end-->
</div>
<!--注册-->
<div id="web_qr_register" style="display: none;">
<form id="register-form" accept-charset="utf-8" method="post">
<ul class="reg_form">
<div id="register-tip" class="cue">请注册</div>
<li>
<label for="register-tel"></label>
<input type="text" id="register-tel" name="tel" maxlength="11" class="inputStyle" placeholder="请输入手机号">
</li>
<li>
<label for="register-password"></label>
<input type="password" id="register-password" name="password" maxlength="10" class="inputStyle" placeholder="密码">
</li>
<li>
<input type="text" id="captcha" name="captcha" maxlength="4" class="inputStyle" style="width: 150px;margin-top: 20px" placeholder="动态密码">
<div class="get-captcha" id="send-captcha">获取验证码</div>
</li>
<li>
<button id="reg" class="submit-btn" type="submit">注册</button>
</li>
</ul>
</form>
</div>
<!--注册end-->
</div>
</div>
登入框css
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;
}
求大神指出我的错误！
回答：
为 CSS 样式 .login-modal 添加 z-index 属性，使其层级大于 #borrowIn 元素。
以上是 【Web前端问题】页面叠加问题 的全部内容， 来源链接： utcz.com/a/142868.html
