在使用z-index这个属性之前,我们必须先了解使用z-index的必要条件:

1、要想给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:relative(定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed)样式。

2、不要给想控制“上、下”的元素设置z-index,而是对他们的父容器设置z-index样式。

看懂了以上两点,我们就明白了如何才能使用z-index这个属性,那就是我们在使用z-index前,先将元素定位,例如position:relative;然后再后面再添加z-index:2000就OK了。

教你彻底解决css中设置z-index的值无效的问题的更多相关文章

  1. CSS中设置margin:0 auto; 水平居中无效的原因分析

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其 ...

  2. 在css中设置图片的背景图,怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  3. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. CSS中设置div垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. html5之canvas困惑 在canvas标签内需要设置了宽跟高,如果在css中设置同样的宽跟高,画出来的图像变形了?

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  6. css中设置div水平居中,margin:0px auto无用的情况

    在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0.左右依据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...

  7. CSS中设置border:none和border:0的区别

    在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一 ...

  8. css中设置background属性

    属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: backgrou ...

  9. css中设置div水平居中,margin:0px auto没用的情况

    在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0,左右根据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...

随机推荐

  1. document.body.scrollTop

    标准浏览器:document.documentElement.scrollTop; 谷歌浏览器:document.body.scrollTop; var scrollTop = document.do ...

  2. 【转】ADO.NET中的五个主要对象

    Connection 物件    Connection 对象主要是开启程序和数据库之间的连结.没有利用连结对象将数据库打开,是无法从数据库中取得数据的.这个物件在ADO.NET 的最底层,我们可以自己 ...

  3. spring配置的相关文章

    1.maven项目中自动下载jar包的pom.xml配置 http://blog.sina.com.cn/s/blog_643634b80101hd3i.html 2.参考配置1:http://www ...

  4. telnet时显示:允许更多到 telnet 服务器的连接。请稍候再试

    telnet时显示:允许更多到 telnet 服务器的连接.请稍候再试    解决办法: windows自带telnet服务器默认的最大连接数为2,要想修改该设置,可以在命令行键入tlntadmn c ...

  5. android常用对话框封装

    在android开发中,经常会用到对话框跟用户进行交互,方便用户可操作性:接下来就对常用对话框进行简单封装,避免在项目中出现冗余代码,加重后期项目的维护量:代码如有问题欢迎大家拍砖指正一起进步. 先贴 ...

  6. APK瘦身实践

    首发地址:http://www.jayfeng.com/2015/12/29/APK%E7%98%A6%E8%BA%AB%E5%AE%9E%E8%B7%B5/ 因为推广的需要,公司需要把APK的大小再 ...

  7. XAML数据绑定(Data Binding)

    XAML数据绑定(Data Binding)   Data Binding可以使得XAML标签属性的赋值更为灵活和方便.在绑定过程中,获取数据的标签成为目标标签:提供数据的标签成为源标签.在XAML中 ...

  8. 分享Kali Linux 2016.2第43周镜像

    分享Kali Linux 2016.2第43周镜像Kali Linux官方于10月23日如约发布了2016.2第43周镜像.和以往一样,此次镜像包含了11个镜像文件,包含PC端的32和64位镜像,还有 ...

  9. Gym 100814C Connecting Graph 并查集+LCA

    Description standard input/output Statements Alex is known to be very clever, but Walter does not be ...

  10. CSS3实现动画

    CSS3实现一个简单的动画 可以改变任意多的样式任意多的次数,用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%. ...