z-index失效相关问题
2016-05-05 14:52
148 查看
在使用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了。
当定位元素的 'z-index' 未设置时(默认为 auto),在 IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下,则严格按照规范,不产生新的局部层叠上下文。
在可能出现定位元素相互覆盖的情况时,明确指定定位元素的 '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了。
当定位元素的 'z-index' 未设置时(默认为 auto),在 IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下,则严格按照规范,不产生新的局部层叠上下文。
在可能出现定位元素相互覆盖的情况时,明确指定定位元素的 'z-index' 特性,避免此问题的出现。
相关文章推荐
- js 定制执行 setInterval 传参数
- 网易视频云邱似峰:视频直播的风口,视频云服务能带来哪些价值?
- Android数据持久化存储
- 工作中用到过的几个简单实用的命令。
- 关于select2远程加载
- 【框架】SurfaceView&MediaPlayer
- Vmware虚拟机网络模式及虚拟机与物理机通信方法
- eclipse java 配置
- c++ 模版template —— c++(复习七)
- c++的多态
- java序列化的作用和反序列化
- 用JMX对Resin内存状态进行监控
- Liquibase+spring 初步使用
- HLJ 亲授 装逼技巧 IB_DESIGNABLE 在xib中不通过runtimeAttribute直接修改边的宽度和颜色
- Oracle数据库和SQLServer数据库中创建DB-Link语法
- Spring 实现初始化和销毁bean之前进行的操作的方法
- Visio绘制ER图-
- 插件
- Activity总结练习
- Leetcode - Binary Tree Paths