<div class="loginContent">
<div class="loginLogo flexCenter left">
<img src="../i/loginLogo.png"/>
</div>
<!--登录输入区域-->
<div class="loginRight flexCenter right">
<div class="loginHandle">
<div class="handleTop clearx">
<span class="left userItro">用户登录</span>
<a class="right goRegister" href="">注册<em class="right"></em></a>
</div>
<!--用户名-->
<div class="userPhone">
<label for="TPL_username" class="left"></label>
<input type="text" name="TPL_username" id="TPL_username" class="left user_text J_UserName" value="" placeholder="账号/已验证手机号">
</div>
<!--密码-->
<div class="userPhone userPass">
<label for="TPL_username1" class="left"></label>
<input type="password" name="TPL_username" id="TPL_username1" class="left user_text J_UserName" value="" placeholder="密码">
</div>
<!--忘记密码-->
<div class="forgetPass clearx">
<a class="right" href="" style="color: #565656;">忘记密码</a>
</div>
<!--登录按钮-->
<input type="submit" class="submit J_Submit" value="登 录">
</div>
</div>
<img class="lgTimes" src="../i/login1.png"/>
<img class="lgunder" src="../i/login2.png"/>
</div>
.loginContent{
z-index:0;width:670px;height:430px;position:relative;background: #fff;-webkit-box-shadow:#666 0 0 10px;-moz-box-shadow:#666 0 0 10px;box-shadow:#666 0 0 10px;}
.loginContent .lgTimes{position: absolute;right:-130px;top:-90px;}
.loginContent .lgunder{
z-index:-1;display:block;width:1270px;position: absolute;bottom: -6px;left:-295px;}
.loginContent .loginLogo{width:300px;height:100%;}
.loginContent .loginRight{width: 370px;height:100%;}
.loginContent .loginHandle{width:308px;height:270px;}
.loginContent .handleTop{height:52px;}
.loginContent .userItro{font-size: 19px;color: #333;}
.loginContent .goRegister{color: #6398f9;}
.loginContent .goRegister em{display: block;width:16px;height:16px;background: url(../i/loginIcon.png) no-repeat -11px -371px;margin:3px 0 0 6px;}
.loginContent .userPhone{width:306;height:38px;border: 1px solid #e4e5e7;}
.loginContent .userPhone label{display: inline-block;width:38px;height:38px;border-right:1px solid #e4e5e7;background:url(../i/loginIcon.png) no-repeat -3px 8px;}
.loginContent .userPass label{background-position: -3px -27px;}
.loginContent .userPass{margin: 20px 0 10px 0;}
.loginContent .userPhone .user_text{height:38px;text-indent: 12px;}
.submit{
z-index:4;width:100%;height:40px;background:#6398f9;cursor: pointer;color: #eee;font-size: 20px;margin-top:34px;z-index: 999;}今天使用了z-index，不生效的原因就是他这个是相对于父元素的z-index来说的，如果容器内部的定位元素相互遮挡了，那么需要去给父元素设置一下z-index，然后子元素想让哪一个显示就吧z-index的值设置的大一点就可以了，如果父元素不设置z-index那么，子元素设置了z-index为负值的时候会直接不显示了。
转载请注明原文地址: https://ju.6miu.com/read-669315.html
