请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › z-index在IE中的迷惑

发新帖

查看: 10450|回复: 21

[教程] z-index在IE中的迷惑 [复制链接]

blank　楼主

怿飞

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-4-23 16:00:51 |显示全部楼层

z-index在IE中的迷惑（一）

z-index属性简介

z-index : auto | number

auto: 默认值。
number: 无单位的整数值，可为负数。

z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。

注意：这个属性不会作用于窗口控件，如 select 对象。
在IE5.5+中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe 对象是窗口控件，会忽略此属性。

z-index属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序（stack order）。

每一个定位元素都归属于一个stacking context。根元素形成root stacking context，而其他的stacking context则由定位元素产生（此定位元素的z-index被定义一个非auto的z-index值），定位子元素会以这个local stacking context为参考，用相同的规则来决定层叠顺序。并且stacking context和 containing block 之间并没有必然联系。

当stacking context一样的时候，就用z-index的值来决定怎样显示，如果z-index也相同（即stack level相同），则按照档中后来者居上的原则（back-to-front ）的顺序来层叠。

当任何一个元素层叠另一个包含在不同stacking context元素时，则会以stacking context的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的stacking context下才会用z-index来决定先后，不同时则由stacking context的z-index来决定。例如：

定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟关系（z-index:200）。你会发现无论A1的z-index是多大，也会被z-index是200的B所覆盖，因为A的z-index只有100。

阅读更详细的内容：http://www.w3.org/TR/CSS21/visuren.html#z-index

BLOG阅读处：http://www.planabc.net/article.asp?id=142

[ 本帖最后由 blank 于 2007-4-23 16:04 编辑 ]

已有 1 人评分	威望	收起理由
snwebsite	+ 5	谢谢前辈分享

总评分: 威望 + 5 查看全部评分

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

西部数码顶级域名注册商39元抢注！

使用道具举报

blank　楼主

怿飞

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-4-23 16:02:37 |显示全部楼层

z-index在IE中的迷惑（二）

IE中z-index BUG

首先先来看一个演示例子的代码部分。

XHTML部分：

<div id="container">
<div id="box1">这个box应该在上面</div>
</div>
<div id="box2">这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。</div>

复制代码

CSS部分：

#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; }

复制代码

两个box被完全的定位，背景色为黄色的box1拥有z-index属性值20，而背景色为绿色的box2拥有z-index属性值10，唯一的区别在于背景色为黄色的box1被放在了一个定义了属性position:relative的div中，并且在文档源代码中位前。

根据上述代码以及z-index的属性简介，我们来分析上面代码将会产生的效果位置。

CSS specification 中清楚的规定了除了根元素，只有定位元素的z-index被定义一个非auto的z-index值才能产生新的stacking context。而例子中被相对定位的元素并没有定义z-index，即z-index为默认值auto。所以按理他不会影响子元素的层叠顺序。即背景色为黄色的box1和背景色为绿色的box2的stacking context相同，即都为根元素产生的root stacking context。再根据规则中当stacking context一样的时候，就用z-index的值来决定怎样显示的原理，则应该z-index属性值20的背景色为黄色的box1在z-index属性值10背景色为绿色的box2之上。

下面我们在FF和IE中分别测试最终的效果，会发现FF中显示的效果和上面分析的效果是完全一致的，而IE中的显示却不一致。

演示地址：http://www.planabc.net/demo/z-index01.html

迷惑：在IE的z-index属性值10背景色为绿色的box却在了z-index属性值20的背景色为黄色的box1之上，和我们分析的结果完全不一致，为什么呢？

解惑：其实这是IE浏览器（windows）的一个BUG——在IE浏览器中，定位元素会产生一个新的stacking context，并且从z-index的值为0开始。

现在让我们来理解上面的演示在IE中的显示逻辑。设置了相对定位的container产生一个新的stacking context，所以其被定位的子元素背景色为黄色的box1以这个新的stacking context为参考来决定层叠顺序。而背景色为绿色的box2此时和背景色为黄色的box1的父元素container为同一个stacking context，所以他们之间按照z-index来决定层叠顺序，即z-index属性值10背景色为绿色的box2在z-index属性值0的container之上。

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

举个例子或许更能形象表达。

XHTML部分：

<body>
<div id="container">
<div id="box1">为什么负值的定位元素在IE和FF下显示不一致呢？Why？</div>
</div>
</body>

复制代码

CSS部分：

#container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }

复制代码

演示地址：http://www.planabc.net/demo/z-index02.html

大家会发现在FF下，背景色为黄色的box1消失了，而IE下却显示。这也是我上面所说的，部分朋友武断的认为IE支持z-index的负值，而FF不支持z-index的负值的原因。我们要透过现象看本质。

在上个例子中的分析，我们知道：设置了相对位置（position: relative）的元素但没有给出非auto的z-index就不会产生stacking context，也就不会影响其子元素的层叠顺序。所以背景色为黄色的box1的stacking context为根元素产生的root stacking context。在上一节中我们讲到“对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下”，按照规则，应该是设定了z-index为-10的黄色的box1会显示在于未指定z-index属性的元素（比如body）之下。所以在FF下背景色为黄色的box1消失了。而在IE中设置了相对位置的 container会拥有z-index值0，产生一个新的stacking context，背景色为黄色的box1在新的stacking context内层叠顺序，故在IE中会看到显示。

不过这里还有一个问题，对于上面的代码，我们再精简一下：

XHTML部分：

<body>
<div id="box1">为什么负值的定位元素在IE和FF下显示不一致呢？Why？</div>
</body>

复制代码

CSS部分：

#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }

复制代码

演示地址：http://www.planabc.net/demo/z-index03.html

大家会发现和上面没精简的代码显示的结果是一致的。但如果用上面的理解在IE下或许无法解释通。因为此时的理解背景色为黄色的box1的stacking context无论在FF下还是在IE下都是根元素产生的root stacking context。

迷惑：那么在IE浏览器中，按照规则，背景色为黄色的box1也应该消失，然而却没有。
解惑：IE浏览器似乎给body元素默认了一个相对定位属性（position: relative）。

通过上面两个简单的例子，我想大家应该大致知道为什么负值的z-index在IE和FF解析不一样，不是FF不支持，而是IE的BUG。

BLOG阅读处：http://www.planabc.net/article.asp?id=143

[ 本帖最后由 blank 于 2007-4-23 16:04 编辑 ]

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

blank　楼主

怿飞

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-4-23 16:03:25 |显示全部楼层

占位补帖！

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

使用道具举报

blank　楼主

怿飞

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-4-23 16:03:36 |显示全部楼层

占位补帖!

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

使用道具举报

帖子: 1163
体力: 4277
威望: 0

发表于 2007-4-23 21:17:35 |显示全部楼层

路过。。。
看版主这么辛苦
支持一下

忍受。一定要学会忍受。

使用道具举报

林小志

荣誉管理 

帖子: 2433
体力: 3080
威望: 25
居住地: 上海市长宁区

发表于 2007-4-24 09:05:01 |显示全部楼层

先收藏，等了N天总算等到了~晚上回家看去~上班

这里是可以点击的，你会点吗？

使用道具举报

blank　楼主

怿飞

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-4-24 09:30:03 |显示全部楼层

还有写完呢，还有“hover下z-index的迷惑”部分没写

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

使用道具举报

缘由心生

帖子: 473
体力: 2799
威望: 2

发表于 2007-4-24 10:19:46 |显示全部楼层

辛苦楼主了，继续期待。。。。。

不懂就问
http://www.welcome58.cn

使用道具举报

帖子: 133
体力: 432
威望: 0
居住地: 广东省深圳市

发表于 2007-6-8 15:31:26 |显示全部楼层

这种问题的解决方法是什么。还有，楼主，你的blog挂了

使用道具举报

blank　楼主

怿飞

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-6-8 16:47:35 |显示全部楼层

原帖由 zhangjiewx 于 2007-6-8 15:31 发表
这种问题的解决方法是什么。还有，楼主，你的blog挂了

BLOG现在正在安置中，谢谢嗷嗷给俺一块豆腐块放BLOG

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

使用道具举报

帖子: 133
体力: 432
威望: 0
居住地: 广东省深圳市

发表于 2007-6-8 17:07:14 |显示全部楼层

下面是我碰到的关于z-index的问题，想请教下怎么解决:

在IE6下那个鲸鱼会浮在背景之上，IE7下就不会

BODY {
   padding: 0px; margin: 0px; font-size: 100%; font-family: "微软雅黑","宋体",Arial;
   color: #cfe5ff; background-color: #1b3b6c;  background-repeat: repeat-x;
   background-image: url(../img/page-background.jpg); width:1004px;
   }
div  {
   border: red 0px solid;
   }
#plus-rejnok {
         z-index:-1; margin-left:-171px; width: 286px; position: absolute; top: 350px;
   height: 140px;
            }/*鲸鱼部分代码*/
#container {
         z-index: 1; margin-left: auto; width: 1004px; margin-right: auto; display:block; position: absolute;

         }/*内容代码*/
h1 {
display: none;
}
hr {
display: none;
}

[ 本帖最后由 zhangjiewx 于 2007-6-8 17:25 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

使用道具举报

帖子: 133
体力: 432
威望: 0
居住地: 广东省深圳市

发表于 2007-6-8 17:18:56 |显示全部楼层

你这篇文章跟这个http://www.aplus.co.yu/lab/z-pos/index1.php应该是类似的

使用道具举报

帖子: 133
体力: 432
威望: 0
居住地: 广东省深圳市

发表于 2007-6-8 17:49:21 |显示全部楼层

斑斑不在吗

使用道具举报

帖子: 133
体力: 432
威望: 0
居住地: 广东省深圳市

发表于 2007-6-9 10:55:30 |显示全部楼层

用一段JS代码搞定了，哈哈

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
   {
   var img = document.images
   var imgName = img.src.toUpperCase()
   if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
   var imgID = (img.id) ? "id='" + img.id + "' " : ""
   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
   var imgStyle = "display:inline-block;" + img.style.cssText
   if (img.align == "left") imgStyle = "float:left;" + imgStyle
   if (img.align == "right") imgStyle = "float:right;" + imgStyle
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
   var strNewHTML = "<span " + imgID + imgClass + imgTitle
   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
      + "filterrogidXImageTransform.Microsoft.AlphaImageLoader"
   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
   img.outerHTML = strNewHTML
   i = i-1
      }
   }
}
window.attachEvent("onload", correctPNG);

参考网站:http://www.caymandiving.cz/en-index.html

使用道具举报

Spicegirl

帖子: 250
体力: 457
威望: 0

发表于 2007-6-16 20:24:11 |显示全部楼层

多谢楼主斑斑，学习。

占位补帖什么时候补上？

期待中。。。。。。

使用道具举报

帖子: 53
体力: 10
威望: 0

发表于 2007-6-16 22:26:50 |显示全部楼层

我来试一下

使用道具举报

季子乌

钻石会员 

帖子: 1874
体力: 4835
威望: 57
居住地: 浙江省杭州市

发表于 2007-6-17 00:10:26 |显示全部楼层

我觉得……连标题都很吸引人~
收藏了

p.pnq.cc爱乌及屋~~

使用道具举报

帖子: 27
体力: 689
威望: 0

发表于 2009-8-7 08:08:52 |显示全部楼层

简单讲：
IE下面z-index 是和父层的z-index有关系的！
而FF下面只认数字，哪个数字大就优先显示那个层！

还有IE不认负数 - -

使用道具举报

帖子: 104
体力: 197
威望: 0

发表于 2009-8-7 14:55:49 |显示全部楼层

头疼，对一排菜单的每一项实现鼠标经过显示提示框，提示框会被后面的菜单项遮盖，很是头疼

使用道具举报

新手上路 

帖子: 17
体力: 74
威望: 0

发表于 2009-9-23 14:54:32 |显示全部楼层

回复 1# blank [楼主] 的帖子

楼主把问题描述清楚了，可怎么解决呢？我今天遇到这个问题，亟等解决方法

使用道具举报

灿灿

高级会员 

帖子: 241
体力: 717
威望: 0
居住地: 广东省深圳市

发表于 2009-9-25 14:00:51 |显示全部楼层

哦也...

我也遇到这个问题了,一个菜单,号称是可以挡住表单的那个菜单,让我的JS放大图片的那个图片挡在下面了.具体点是挡在IE下面了,FF.Safari,谷歌下面一切正常.就给挡在IE下了..

好好学习，天天向上！

使用道具举报

帖子: 445
体力: 1633
威望: 0
居住地: 辽宁省大连市

发表于 2009-9-25 14:20:56 |显示全部楼层

版主辛苦，期待下一篇精彩的文章！

设计自己,完善自己!

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-9 14:30 , Processed in 0.115725 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部