解决z-index不生效

来源：互联网发布：网络平台使用协议编辑：程序博客网时间：2024/05/22 06:17

                      <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为负值的时候会直接不显示了。

2 0