博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
z-index兼容问题:关于ie6/7下的z-index
阅读量:6990 次
发布时间:2019-06-27

本文共 974 字,大约阅读时间需要 3 分钟。

z-index这个属性其实在挺多地方都会用到,在百度上搜索也有大量关于z-index的篇幅去阐述这个属性,特别是在ie6下的z-index处理有更多的相关文章,本文就不再围绕z-index这一属性的基础展开叙述。这里要讨论的是最近在项目上对z-index在ie6下自己的一个认识,希望能帮助在上遇到问题的同行一个参考。

首先是demo,点击就可以看到相关的demo了,这个demo就是一个的模块,实现的功能是鼠标经过时当前标签切换背景以及弹出相关层,代码的结构好坏不做进一步探讨。我们继续来看z-index这个东西。
首先我是这样处理,所有a标签z-index都为10,经过z-index为20,当前a标签z-index为30,这样在chrome、firefox、ie9\8都达到了预期的效果(设置z-index的过程当然要顺便设置position这个东西,如果你有先看过网上的文章也会知道。)
在首次完成后ie6\7并不兼容,也就是你现在所看到的demo(你可以放到ie6\7里看看),经过弹出层被其他a标签遮住了。按照平时的惯例依照直觉z-index:9999;position:relative;zoom:1各种各样的属性都用上了,这个层还是死死的躺在其他a标签下面。
没办法,看来乱碰撞不能解决问题,只能用理性去剥开ie6下z-index的沉沦原因。据我所知(不知道什么时候记住的)ie6下的z-index比较是看他们的老大(父级)的比拼,也就是说谁的老大高级(z-index),往往它们也就跟着上位了。
按着刚才描述的逻辑去思考这个demo在ie6\7下的问题,目前所有a标签都是同级(z-index:10;),也就是说所有堂口的老大都是10级的,他们的小弟肯定不会大过他们,这样想来难怪经过弹出层在其他a下面了,鉴于这种情况,我只能把当前a标签的老大li再提高一个级别,使鼠标经过的当前a标签以及弹出层整体提高一个档次,这样就不会给其他a标签遮住了。
关于ie6/7下的z-index说到底其实就是拼爹,谁的爹大谁就在上面(大部分如此,不排除其他情况)。如果你没有得到答案我会在收到一条评论后公开~最后再补充一句,尼玛的ie6!!

转载于:https://www.cnblogs.com/good10001/p/4738573.html

你可能感兴趣的文章
junit整合spring
查看>>
java正则表达式【大全】
查看>>
mac上git安装与github基本使用
查看>>
如何为引用类型如何重写Object.Equals()方法?
查看>>
下拉顶部刷新简单实现
查看>>
Linux的基本配置
查看>>
Django框架之模型层(二)
查看>>
who 查看系统登录用户
查看>>
java语言中application异常退出和线程异常崩溃的捕获方法,并且在捕获的钩子方法中进行异常处理...
查看>>
架构师速成6-初中 分类: 架构师速成 2015-0...
查看>>
最新---java多线程下载文件
查看>>
【二】调通单机版的thrift-C++版本
查看>>
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
查看>>
ASP.NET MVC 主要的四种过滤器和三种具体实现类
查看>>
Python中的正则表达式
查看>>
由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本,请添加处理程序。如果应下载文件,请添加 MIME 映射...
查看>>
(转)结构体中使用string所引发的问题
查看>>
Linux查看网卡流量(转)
查看>>
论文修改(1)
查看>>
[javaEE] web应用的目录结构&配置虚拟主机
查看>>