解决z-index不生效

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

解决z-index不生效相关推荐

成功解决IndexError: index 14 is out of bounds for axis 1 with size 14
成功解决IndexError: index 14 is out of bounds for axis 1 with size 14 目录解决问题解决思路解决方法解决问题 IndexError: ...
成功解决IndexError: index 0 is out of bounds for axis 1 with size 0
成功解决IndexError: index 0 is out of bounds for axis 1 with size 0 目录解决问题解决思路解决方法解决问题 IndexError: i ...
idea java gitignore,关于idea的gitignore文件编写及解决ignore文件不生效问题
1.下载idea的 <.ignore> 插件,重启idea生效 2.添加自己想要忽略的文件夹及文件,一般选这个就够了 3.如果想要忽略提交的文件夹名称变成黄色了,就代表成功忽略该文件夹了! ...
linux系统出现BUG:softlockup- CPU#7 STUCK FOR 22s 等字样的解决办法并永久生效
linux系统出现BUG:softlockup- CPU#7 STUCK FOR 22s 等字样的解决办法并永久生效厂家上门维护发现主板坏了,更换新的主板后,发现操作系统登陆不了, 临时解决方案在 ...
解决yml文件不生效
解决yml文件不生效有可能是空格和回车问题. 静态文件没有导出添加maven配置 <build><resources><resource><directo ...
AOP注解@Before、@AfterReturning拦截单个方法的入参和出参，纯注解方式（附源码下载），解决单个方法不生效问题（一）
AOP注解@Before.@AfterReturning拦截单个方法的入参和出参,纯注解方式(附源码下载),解决单个方法不生效问题(一) 问题背景 AOP注解@Before.@AfterReturni ...
RCP：解决Navigator快捷键不生效的问题
自己扩展CNF之后,导航栏的删除.复制.黏贴等快捷键失效了,在网上搜索了半天,结果最终不如自己看源码. 本篇文章的主要目的不止于解决快捷键失效,更在于如何处理类似的问题,如何利用debug快速定位.这 ...
解决text-overflow: ellipsis;不生效的问题
按照text-overflow: ellipsis;使用规则,在标签样式中添加该属性未生效,例如: 写道 .text { text-overflow: ellipsis; } <div clas ...
解决Some index files failed to download.They have been ignored, or old ones used instead报错
使用sudo apt-get update后报错: Err:1 http://ppa.launchpad.net/wireshark-dev/stable/ubuntu bionic InReleas ...
vue index.php,如何解决vue $index报错问题
vue $index报错是因为vue已经移除了原来的$index和$key用法,变成了index和key,其解决办法就是修改$index和$key为index和key即可. 本教程操作环境:windo ...

解决z-index不生效

解决z-index不生效相关推荐

最新文章

热门文章