到新地方有些日子了，差不多适应了这边的工作节奏与流程 。接到的第一个开发任务是几个比较简单的页面，需要做的工作就是先把设计图变成页面，然后使用PHP创建几个请求的接口传递数据，标准且简洁的web开发思路 。可是真有些日子没有写DIV CSS了，而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目)，所以这次开发中不可避免的碰见了几个问题，尤其是在IE下的 z-index 问题很有意思，所以整理了一些资料和总结分享给大家...注：因为引入了jsfiddle，所以页面加载受影响会稍慢一些^_^
z-index属性
z-index : auto | numberz-index 属性设置元素的堆叠顺序，如果为正数，则离用户更近，为负数则表示离用户更远;拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面;z-index 仅能在定位元素上奏效(position 属性值为 relative 或 absolute 或 fixed的对象) 。
z-index规范参考
在 W3C CSS2.1 规范中，每个元素都具有三维的空间位置，除我们所熟悉的水平和垂直位置外，元素还可在 "Z轴" 方向上层层相叠、依次向前排开; 元素在 "Z 轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定 。在文档中，每个元素仅属于一个层叠上下文 。在给定的层叠上下文中，每个元素都有一个整型的层叠级别，它描述了在相同层叠上下文中元素在 "Z轴" 上的显示顺序;同一个层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则(back-to-font);不同层叠上下文中，元素显示顺序以父级层叠上下文的层叠级别来决定显示的先后顺序 。与自身的层叠级别无关;每一个定位元素都归属于一个stacking context 。根元素形成 root stacking context，而其他的 stacking context 则由定位元素产生(此定位元素的 z-index 被定义一个非 auto 的 z-index 值)，定位子元素会以这个 local stacking context 为参考，用相同的规则来决定层叠顺序;当任何一个元素层叠另一个包含在不同 stacking context 元素时，则会以 stacking context 的层叠级别(stack level)来决定显示的先后情况 。也就是说，在相同的 stacking context 下才会用元素本身的 z-index 来决定先后，不同时则由 stacking context 的父元素的 z-index 来决定 。
在IE下出现的问题
当定位元素的 'z-index' 未设置时(默认为 auto)，在 IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文 。而在其它浏览器下，则严格按照规范，不产生新的局部层叠上下文 。
这个问题将导致定位元素的层叠关系在不同浏览器出现很大的区别，严重的可导致页面布局混乱、内容覆盖等 。
受影响的浏览器有IE6 IE7 IE8(Quriks Mode)
直接从w3help复制了代码，分析以下代码：
文章插图
文章插图
文章插图
注：Q代表Quriks Mode，即混杂模式 。
根据 W3C CSS2.1 规范中的说明，定位元素【p1】和【p3】由于未设置 'z-index' 特性(使用默认值 auto)，它们不会创建新的局部层叠上下文，而定位元素【p2】设置了 z-index:1 则会创建新的层叠上下文 。
另，在同一根层叠上下文中，同为 z-index:auto 的定位元素【p1】和【p3】，它们的层叠级别相同，但【p3】在【p1】之后，所以在 Z 轴上【p3】比【p1】靠前显示，又，【p2】层叠上下文的层叠级别为正数，所以【p2】的层叠级别要比【p3】高 。因此，它们在 Z 轴上的顺序为：(遵循 back-to-font)【p1】 -> 【p3】 -> 【p2】
以上为标准浏览器下的情况 。
推荐阅读
- 我的驾驶证上有别人车的罚款怎么办
- 迅雷怎么取消抱团下载
- 一见钟情共鱼水是指什么动物
- 山西大学外国语学院怎么样
- 步多多怎么开始计步
- 什么食物含叶酸最多
- 桃树苗是怎么种出来的
- 给1100屏幕上加上一串吉祥数字
- 江河是什么电视剧