z-index在IE中的迷惑

今天在写页面的时候发现头部导航栏的下拉菜单，被下面的画中画遮挡住了，然后把导航的下拉菜单样式设置为z-index:999;但是在IE下没起什么作用，而在FF下起作用了。然后又把画中画的样式设置为z-index:-99; 在IE下还是没反映。囧。。。

IE下: FF下:

然后在Google里搜索了一下z-index的相关属性，找了半天找到一篇文章。才发现原来又是IE的BUG。。。
解惑： 其实这是 IE 浏览器（windows）的一个 BUG ——在 IE 浏览器中，定位元素会产生一个新的 stacking context，并且从 z-index 的值为 0 开始。

CSS specification 中清楚的规定了除了根元素，只有定位元素的 z-index 被定义一个非 auto 的 z-index 值才能产生新的 stacking context。一般被相对定位的元素并没有定义 z-index，即 z-index 为默认值 auto 。所以按理他不会影响子元素的层叠顺序。而设置了相对定位的 head 产生一个新的 stacking context，所以其被定位的子元素下拉菜单以这个新的 stacking context 为参考来决定层叠顺序。

其实IE这个BUG的影响范围很广，只是大家平时不太注意。下面来说明一个最常见的出现情况 z-index 的负值解析，很多朋友因为这个 BUG 的存在甚至武断的认为 IE 支持 z-index 的负值，而FF不支持 z-index 的负值。

我们知道：设置了相对位置（position: relative）的元素但没有给出非 auto 的 z-index 就不会产生 stacking context，也就不会影响其子元素的层叠顺序。所以下拉菜单的 stacking context 为根元素产生的 root stacking context。“对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下”，按照规则，应该是设定了 z-index 为-99的画中画会显示在于未指定 z-index 属性的元素（比如 body）之下。所以在FF下正常。而在IE中设置了相对位置的 head 会拥有 z-index 值0，产生一个新的 stacking context，下拉菜单在新的 stacking context 内层叠顺序，故在 IE 中会被遮挡住。

z-index可以控制div的显示层级，但是FF和IE对z-index的解析机制不一样。

FF中解析z-index，只要设置div的z-index属性就可以控制了。

IE中解析z-index，不仅要设置div的z-index属性，还必须设置div的父div的z-index属性，这样才可以控制。

解决办法：在 head 样式中添加z-index:99; 终于在IE下显示为正常了，FF下也正常。

其实当时我也不是靠这文章说的方法解决的，只是让我知道了原来这是ie bug。

如果要让test3在test1的上面，那必须这样写

关键z-index要写在父div ，

另外，td不能这样写

IE虽然支持，但FF不支持TD这样写的，必须要加个div或者<span>包起来。

阅读更详细的内容：

http://www.w3.org/TR/CSS21/visuren.html#z-index

http://bbs.blueidea.com/thread-2872952-1-1.html

z-index在IE中的迷惑相关推荐

html设置z index.html,CSS中z-index属性的使用方法和示例介绍
怎么使用CSS z-index属性?下面本篇文章就来给大家浅谈一下CSS z-index属性的使用方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. z-index属性介绍只有设置 ...
网易之小易最近在数学课上学习到了集合的概念,集合有三个特征：1.确定性 2.互异性 3.无序性.需要根据给定的w，x，y，z,求出集合中一共有多少个元素。
import java.util.HashSet; import java.util.Scanner; import java.util.Set;/*** 小易最近在数学课上学习到了集合的概念,集合有 ...
HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
mysql index sub part_mysql中的key和index 理解
mysql的key和index多少有点令人迷惑,这实际上考察对数据库体系结构的了解的. 1 key 是数据库的物理结构,它包含两层意义,一是约束(偏重于约束和规范数据库的结构完整性),二是索引(辅助查 ...
2022年斯坦福AI Index公布：中美主导跨国研究，专利、投资金额暴增
来源:学术头条当地时间 3 月 16 日,斯坦福大学以人为本人工智能研究所(StanfordHAI)正式发布了<2022 年人工智能指数报告>(Artificial Intelligen ...
ngFor with index作为属性中的值
我有一个简单的ngFor循环,它也跟踪当前index . 我想将该index值存储在属性中,以便我可以打印它. 但我无法弄清楚它是如何工作的. 我基本上有这个: <ul *ngFor=" ...
替换index和show中select_tag的方法
channel_type对应多种类型,每个类型在数据库中存储的字段和在页面上显示的字段是不同的, 如果在index里直接使用 select_tag 方法,是这样的: <%= select_tag ...
python中index从列表中查_在Python中查找包含它的列表的项目的索引
>>> ["foo", "bar", "baz"].index("bar") 1 警告如下请注意,虽 ...
python中index函数_python中index函数的用法
原博文 2019-08-28 15:23 − a = "I will never kiss a guy." b = a.index("kiss") print( ...
mysql use index用法_MySQL中USE INDEX 和 FORCE INDEX
问题在一次生产环境排查性能问题时, 发现有个请求在一些用户的数据量比较大的情况下, 最高耗时差不多要3s. 而且还是一个轮询的请求. 原因在排查问题时, 定位到是执行某条SQL时在用户的数据比较大 ...

z-index在IE中的迷惑

z-index在IE中的迷惑相关推荐

最新文章

热门文章