深入理解CSS标记z-index的作用
本文通过详细描述z-index的每个属性作用来为我们全面了解打下基础，z-index主要用来作为不同div中的层叠关系中，请注意阅读本文需要一定的CSS基础！
定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。
平台：win/IE win/FF
用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序
值：　　　auto | 整数 | inherit
默认：　　auto
适用于：　定位元素
继承性：　no
理解stacking context
每个box都归属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stacking
context，其他stacking
context由定位元素设置z-index为非auto时产生。如#div1{position:z-index:0;}即可使
id=div1的元素产生stacking context。stacking context和 containing block
并没有必然联系。
理解stack level
在一个stacking context中的每个box，都有一个stack level（即层叠级别，以下统一用stack
level），它决定着在同一stacking context中每个box在z轴上的显示顺序。同一stacking
context中，stack level值大的显示在上，stack level值小的显示在下，同一stack
level的遵循后来居上的原则（back-to-front ）。不同stacking
context中，元素显示顺序以父级的stacking context的stack level来决定显示的先后情况。于自身stack
level无关。注意stack level和z-index并不是统一概念。（将在后文慢慢理解）
stack level规则
每个stacking
context中可包含块级（block）元素、内联（行内inline）元素，还有设置float属性的元素、定位元素等等他们在同一父级
stacking context中的显示顺序是怎样的？即stack
level是怎样的呢？比如一个块级元素和内联元素发生层叠的话谁会在上面呢？是不是谁在后面谁就在上面呢？
根据w3c关于stack level的介绍可以得出以下stack level规则
每个stacking context都包括以下stack level （后来居上）:
父级stacking context的背景、边界
z-index值为负值的定位元素（值越小越在下）
文本流中非定位的、block块级子元素
文本流中非定位的、float浮动子元素
仿佛能产生stacking context的inline元素
否则，inline元素的stack level将在block元素之前。
z-index：auto/0的定位元素
z-index值为正的定位元素（值越大越在上）
以上stack level在浏览器执行情况:
firefox3.0下测试完全吻合，firefox2.0下稍有不同即：“z-index值为负值的定位元素”在“父级stacking
context的背景、边界”之前。
ie6.0和7.0中：inline元素的stack
level位于block元素之前，且“文本流中非定位的、float浮动子元素”（以下简称浮动元素）和“文本流中非定位的、block块级子元素”（以下简称block元素）处于同一级。
FF下测试：
position:z-index:1;定位元素z-index值为正
position:z-index:定位元素z-index值auto
inline元素
未定位的浮动元素
----这个未定位的块级元素
这个box z-index:-1;定位元素z-index值为负
&&&&&提示：您可以先修改部分代码再运行
代码说明：
由前所述，如果元素的stack level同级则后来居上；元素的stack
level高，这无论代码在文档中位置如何都显示在上面，即使代码在最前面；如果元素的stack
level低，无论代码位置如何都将显示在下面，即使代码在最后面。
我们就根据这一点，以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例，如果我把“float元素”的代码写在“block元素”的前面，且实际显示为：“float元素”在“block元素”之上。即可证明："float元素”的stack
level级别较“block元素”高。因为如果同级,或者“block元素”的stack
level高都应是“block元素”显示在上。
根据以上，根据标准中的顺序，把stack level高的元素代码写在前面，stack
level低的代码写在后面，如果显示结果是：代码在前面的元素显示在上方 ，即证明上面的stack level规则。
测试结果：stack
level规则，IE中，如果body默认了一个位置属性，即body是其父级stacking
context，box1应显示在其上方，事实却不是这样。而且当我们给body加上position：relative以后，显示效果和stack
level规则一致。所以body并没有默认位置属性。 stack
level规则自己分析）符合推测。
在w3c的说明中也证明这点
[CSS3COLOR]. stack
level决定。对于同一stack level的定位元素由z-index的大小进一步决定显示次序。
在FF3.0中结果和标准顺序一致。FF2.0中“z-index值为负值的定位元素”在父级stacking
context的背景下面。（注意ff2.0的这个特殊性）
IE下测试：
这个box position:z-index:1;
这个box position:z-index:
这个box float
这个box block
这个box z-index:-1;
&&&&&提示：您可以先修改部分代码再运行
代码说明：
此代码也是根据上面的测试思想，但由于inline元素在ie中的特殊性，把inline的代码写在了后面，事实证明结论是正确的。对于“block元素”和“float元素”顺序大家可以交换顺序测试。
测试结论：
IE下（无论ie6.0或者ie7.0）“float元素”和“block元素”属同一stack
level，而“inline元素”较其stack level低。
&“float元素”，“z-index：auto的定位元素”仿佛产生了新的stacking
context，但其真正能产生新的stacking context的后代任按其父级stacking
context定位。（但IE中“z-index：auto的定位元素”
会拥有z-index值0，产生一个新的stacking context，并影响其子元素定位。这是IE一个BUG）
inline元素在FF中仿佛能产生新的stacking context，而在IE中则不能。
至此stack level规则内容已经完毕，现在应该能理解stack level和z-index的不同。stack
level来决定这一个stacking context中各元素在z轴上的显示顺序，对于同一stack
level的定位元素才由z-index进一步决定显示次序。
一些问题的解释：
为什么负值的定位元素在IE和FF下显示不一致呢？Why？
&&&&&提示：您可以先修改部分代码再运行
解惑：IE浏览器似乎给body元素默认了一个相对定位属性（position:
relative）。
真是这样吗？
BODY:z-Index:0
DIV:z-Index:-1
&&&&&提示：您可以先修改部分代码再运行
box1显示在body的下方，根据上面的
那为什么负值的定位元素在IE和FF下显示不一致呢？
ie中根据stack level规则： z-index为负的定位元素的stack level比父级stacking
context（此处是root stacking
context）高，显示在其上方。故box1在ie中能显示。ff3.0和标准一致，也能显示。大家可以试一下。
ff2.0中由于那条特殊的stack level，即 z-index为负的定位元素的stack level比父级stacking
context（此处是root stacking context）低，所以显示在root stacking
context下方。故不能看见。
另外，上面的代码中加上opacity那条后，在ff2.0中即可显示了。这又是什么原因呢？
推测：在火狐中如果给元素设置opacity属性（1除外），即会产生新的stacking context。
上面加上opacity属性后在ff2.0中可显示box1在body下，ff3.0box1在body上，（可以根据上面的
In future levels of CSS, other properties may
introduce stacking contexts, for example 'opacity'
在一个stacking context中元素的z-轴显示顺序，由元素所处的
ie中给元素设置position属性（static除外）可产生新的stacking context
ff中给元素设置opacity属性（1除外）可产生新的stacking context
除此之外（也许设置其他属性也会产生新的stacking
context，但还不知道）只有定位元素设置了z-index(auto除外)才会产生新的stacking
context，子元素将按照新的stacking context，定位。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。Posts - 50,
Articles - 0,
Comments - 1922
完成《前端攻略系列》仅仅是第一步...
21:40 by 聂微东, ... 阅读,
　　到新地方有些日子了，差不多适应了这边的工作节奏与流程。接到的第一个开发任务是几个比较简单的页面，需要做的工作就是先把设计图变成页面，然后使用PHP创建几个请求的接口传递数据，标准且简洁的web开发思路。可是真有些日子没有写DIV+CSS了，而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目)，所以这次开发中不可避免的碰见了几个问题，尤其是在IE下的 z-index 问题很有意思，所以整理了一些资料和总结分享给大家...注：因为引入了jsfiddle，所以页面加载受影响会稍慢一些^_^　　
　　阅读目录：
　　z-index属性　　
z-index : auto | number
z-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复制了代码，分析以下代码：
&style type="text/css"&
body { margin:0; }
.p1{ top:20 height:50 width:150 background-color:}
.p2{ top:10 left:20 height:30 width:100 background-color:}
.p3{ top:0 left:50 height:100 width:50 background-color:}&/style&&div style="position:" class="p1"&1
&div style="position: z-index:1;" class="p2"&2&/div&&/div&&div style="position:" class="p3"&3&/div&
　　注：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】
　　以上为标准浏览器下的情况。
　　而在 IE6 IE7 E8(Q) 下，定位元素【p1】和【p3】都创建了新的局部层叠上下文，在同一根层叠上下文中，它们的层叠级别相同，但【p3】在【p1】之后，所以在 Z 轴上【p3】比【p1】靠前显示。此时，由于【p2】处于【p1】的层叠上下文中，所以【p2】在 Z 轴上要比【p3】靠后。
　　在来一个例子：
.parent{width:200 height:200 padding:10}
.sub{text-align: font:15px Vwidth:100 height:100}
.lt50{left:50top:50}&/style&&div style="position: background:" class="parent"&
&div style="position:z-index:20;background:" class="sub"&20&/div&
&div style="position:z-index:10;background:" class="sub lt50"&10&/div&&/div&&div style="position:left:80top:80background:" class="parent"&
&div style="position:z-index:2;background:" class="sub"&2&/div&
&div style="position:z-index:1;background:" class="sub lt50"&1&/div&&/div&
　　解决办法　　
　　理解层叠上下文、层叠级别与 'z-index' 之间的关系。在可能出现定位元素相互覆盖的情况时，明确指定定位元素的 'z-index' 特性，避免此问题的出现。
　　注：此段内容基本都是来自w3help。
　　在IE6下z-index的问题
　　我不是一个喜欢抱怨的人，so...有关抱怨IE6的话在此省略500字...
　　先上个图说说我在工作中实际遇到的问题：
　　图片的上半部分就是在非IE6下的交互，图片下半部分是在IE6下的显示效果，当打开虚拟机测试的时候我表示瞬间碉堡了，囧...在IE6下这个tips被盖住了，很明显这个不是我想要的效果，可是为什么会出现这个情况类？接着往下看。
　　分析此类问题的原因：　　
　　1.这是个拼爹的时代，在IE6下很好的体现了这点...囧
　　按照正常的思维，z-index层级越高，内容越应该在上面显示，在大部分的浏览器在大部分的情况下，确实如此，但是不绝对。尤其遇到IE6。
　　在IE6下的层级高低不仅要看本身，还要看自己的父元素是否给力：父元素的 position 属性为 relative或absolute 时，子元素的 absolute 属性是相对于父元素而言的。而在IE6下的层级的表现有时候不是看子元素的 z-index 多高，而要看它们的父元素的 z-index 谁高谁低。点击 Result 可以看到HTML对应的VIEW。
　　从以上的代码中可以看到最内层&div&的z-index属性为999，其父元素的z-index属性为100。按照正常的显示逻辑，图片应该正常显示且不会被背景色所影响，可是在IE6下会有问题，直接上图片会比较直观，比较看看IE6下和非IE6浏览器的显示效果。chrome、FF和opera都经过测试了，为了不使图片过多我就拿个chrome的截图吧。
　　重现这个bug的条件很简单，只要绝对定位（position:absolute）&div&的祖先元素，或者说是最顶级的祖先元素的 relative 属性小于黑色半透明层的z-index层级即可。解决办法也很简单，只需要给的祖先元素加上z-index就可以。
　　为具有 relative 属性的顶级祖先元素打了鸡血(加了z-index)后，IE6下终于正常显示了。这个问题很现实的教育了我们 - 在拼爹拼不过的条件下我们只能靠自己努力...
　　IE6下拼爹的问题也就是我在实际开发中碰到的问题，现在已经完美解决且达到需求的效果了。接下来要介绍的是一些我总结的资料，都是介绍在IE环境下得各种z-index的坑。
&　　2.万恶的float
　　float 是 css 的定位属性，而且应该是CSS中最常用的属性之一了，至于为什么说它万恶等我改天去准备一篇文章单独进行解说，在这里借着以前的学习笔记简单说几点：
　　1. IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉；
　　2.&3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样；
　　3.&双倍边距bug处理 IE6 时，另一个需要记住的事情是，如果在和浮动方向相同的方向上设置外边距(margin)，会引发双倍边距。
　　有关float的扫盲就先到这里，还有一点就是float毕竟是标准的属性，而且大多数的前端都习惯用它去实现页面，所以我的建议就是：深入理解 HTML语义和表现。
　　接着开始讲述 z-index和float 在IE6环境下擦出的坑爹的火花...先上一段代码：
　　&div style="background:#000;width:100%;height:600opacity:0.3; filter:alpha(opacity=30);position:left:0;top:0;z-index:1;overflow:"&&/div&　　&div style="position:z-index:100;"&　　　　&img src="/cnblogs_com/Darren_code/311197/o_1.jpg" style="float:" width="300" /&　　&/div&
　　看到&img&有设置float属性，上面这段代码显示的效果与IE6下拼爹失败一样，IE6下的犀牛书是灰色的 T.T 。为了让犀牛书正常显示，只需要把&img&的float属性去掉即可。
　　个人理解可能是因为&img&的float使得z-index失效造成的。网上还有种说法是因为float和relative两者在定位上问题，所以一起使用的时候会造成此bug。
　　这个问题又教育了我们 - 某些环境(IE6)下也要小心被兄弟坑...
　　IE6下 select z-index无效而遮挡div
　　这个问题其实在是比较常见的了，我早期做项目的时候有幸遇见过这个问题，所以有现成的资料，趁着这次也刚好整理整理、回忆回忆。两个解决办法都是围绕iframe展开的，咱们先来看第一个。
　　1.用 iframe 包裹 select 元素
　　使用iframe包住select，这样iframe可以有z-index，只要在div上设置的z-index比iframe的高即可实现。示例代码如下：&
　　&iframe style="z-index:1;position: "&　　　　&select name="me"&
　　　　　　&option value="name"&Darren聂微东&/option&
　　　　　　&option value="sex"&male&/option&
　　　　　　&option value="age"&secret&/option&
　　　　&/select&
　　&/iframe&
　　2.以 Iframe 作为div的子元素，覆盖 select 元素(推荐使用)　　建立一个跟div同宽同高的iframe，并且z-index比div要低。
&style type="text/css"&#iframe{
width: 100%;
height: 100%;
z-index:-1;}
.text_div{
width: 300
height: 200
background :
z-index:100;
&/style&&div class="text_div"&
&span&这里可以包含其他dom元素&/span&
&iframe id="iframe"&&/iframe&
　　注:在这里如果不加src属性,尽管iframe会把select挡住,但是由于默认iframe为白色,会影响原来的div背景色。解决方法可以加了一个空的HTML文件，并把body 的值设为和原来div背景色一致,这样就解决了默认白色背景色的问题，这里只是一种思路，办法总比困难多&^_^。
　　本文结语
　　与很多做国内项目的前端一样，我也会常常忍不住诅咒IE，可是假如换个思考方式我们也得感谢它，工作因为它才有了更多挑战和成就感。
　　对不理解CSS层叠朋友来说&z-index 确实是一个大坑，希望这篇文章能够给那些掉到坑内的朋友一些帮助。
　　如果觉得此文还算用心，请劳驾点击右下角的推荐，谢谢^.^
　　参考资料：CSS中的z-index属性有什么用？？简单说明_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
CSS中的z-index属性有什么用？？简单说明
我有更好的答案
网页上出现多个由绝对定位（POSITION，那么它们的顺序号就决定了谁上谁下了，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决:fixed）所产生的浮动层时，必然就会产生一个问题:absolute）或固定定位（POSITION。z-index的意思就是在z轴的顺序，如果说网页是由x轴和y轴所决定的一个平面，这个值较大的就在上面，较小的在下面，那么z轴就是垂直于屏幕的一条虚拟坐标轴，浮动层就在这个坐标轴上
采纳率：81%
来自团队：
如果不用，默认的情况是后面的元素叠在前面的元素上面，但是有时候需要将前面的元素一直保持在最上面，这时候就需要用到z-index了，那么就把前面的z-index设的比后面的大，明白了吗？
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包2017年10月 Web 开发大版内专家分月排行榜第二2017年9月 Web 开发大版内专家分月排行榜第二2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。}