你真的理解z-index吗？

比眉伴天荒 2022-08-07 12:52 229阅读 0赞

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:698px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="word-wrap:break-word">一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 &nbsp;&nbsp;假如只是开发简单的弹窗效果，懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间层叠关系给处理好，那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了。本文作为对W3C Recommendation-Layered presentation<a href="http://www.html5cn.org/portal.php?mod=list&amp;catid=13" style="word-wrap:break-word; color:rgb(68,68,68)!important; text-decoration:none!important; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">学习</a>后整理的笔记，以便日后查阅。 &nbsp;&nbsp;由于将英文名词翻译为中文名词容易产生歧义（如Normal flow被翻译为文档流），因此本文将直接采用原英文名词，而涉及到的英文名词解释如下： &nbsp;&nbsp;non-positioned element：无CSS定位的元素，也就是position: static的元素。 &nbsp;&nbsp;positioned element：CSS定位的元素，也就是position: relative/float/absolute的元素。 &nbsp;&nbsp;box：文档树由element组成，渲染树由box组成，实际进行元素大小、布局渲染操作的对象是box进行而不是element。box由element对应生成（也有是anonymous box不是由element对应生成，而是渲染器根据规则自动生成），non-positioned element对应的是non-position box，positioned element对应的是position box。 &nbsp;&nbsp;z-axis：box定位坐标系中的z轴。 &nbsp;&nbsp;stacking context：层叠上下文，z-axis的基本组成单位。box与stacking context的映射关系为N:1。每个stacking context有一个父context（除了root stacking context外）和0~N个子context。 &nbsp;&nbsp;root stacking context：与根box（html/body对应的box）对应的层叠上下文，是其他stacking context的祖先context，root stacking context的范围覆盖整条z-axis。 &nbsp;&nbsp;stack level：层叠等级，当N个box位于同一个stacking context中，则通过stack level来决定它们位于z-axis上的位置。注意：stack level为相对值而非如px那样为绝对值。 二、图解分层显示&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;其实我们常接触到的z-index只是分层显示中的一个属性而已，而理解z-index背后的原理实质上就是要理解分层显示原理。下面我们通过一个示例来认识一下分层显示涉及的对象和属性（z-axis、(root) stacking context、box、stack level）以及它们之间的关系。 HTML Markup 
 <div style="word-wrap:break-word; overflow:hidden; margin:10px 0px; padding:5px 10px; color:rgb(102,102,102); background:rgb(247,247,247)"> 
 <div style="word-wrap:break-word"> 
 <ol style="word-wrap:break-word; margin:1em 2em; padding:0px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;style type="text/css"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;div{position:relative;} </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/style&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;body&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div id="d1" style="z-index:10;"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; &lt;div id="d4" style="z-index:-9999;"&gt;&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div id="d2" style="z-index:8;"&gt;&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div id="d3" style="z-index:9;"&gt;&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;p id="p1"&gt;&lt;p&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/body&gt;</li> 
 </ol> 
 </div> 
 复制代码 
 </div> <a href="http://www.html5cn.org/data/attachment/forum/201504/10/1450155v5sxi6vzp6don88.png" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/forum/201504/10/1450155v5sxi6vzp6don88.png" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 说明： &nbsp; &nbsp;&nbsp; &nbsp;1. 在构造渲染树时会为element生成对应的box，所以div#d1-&gt;d1:box,div#d2-&gt;d2:box,div#d3-&gt;d3:box,div#d4-&gt;d4:box,p#p1-&gt;p1:box。 &nbsp; &nbsp;&nbsp; &nbsp;2. 对于positioned box而言，若z-index属性值不是0，则会创建一个新的stacking context，并且其子孙box将属于这个新stacking context。 &nbsp; &nbsp;&nbsp; &nbsp;3. 同一个stacking context的z-index才具有可比性，也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。如示例般，虽然-9999比10小，但由于d4:box和d1:box位于不同的stacking context，因此无法判断哪个box更靠近用户。 三、层叠规则　　　　　　　　　　　　　　　　　　　　　　　　　　 &nbsp;&nbsp;层叠规则就是决定到底哪个box更靠近用户。 &nbsp;&nbsp;1. 前提：boxes属于同一个stacking context，并且z-index相同 &nbsp; &nbsp;&nbsp; &nbsp;规则：按照box对应的element在文档树的顺序，后者比前者更靠近用户（back-to-front） 
 <div style="word-wrap:break-word; overflow:hidden; margin:10px 0px; padding:5px 10px; color:rgb(102,102,102); background:rgb(247,247,247)"> 
 <div style="word-wrap:break-word"> 
 <ol style="word-wrap:break-word; margin:1em 2em; padding:0px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;!-- 两种情况下，d2均排在d1的后面，因此d2在z-axis上位于d1的上面 --&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;div id="d1"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div id="d2"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px"> </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;div id="d1"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;div id="d2"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/div</li> 
 </ol> 
 </div> 
 复制代码 
 </div> &nbsp;&nbsp;2. 前提：boxes属于同一个stacking context，并且z-index不同 &nbsp; &nbsp;&nbsp; &nbsp;规则：z-index属性值大的box更靠近用户 
 <div style="word-wrap:break-word; overflow:hidden; margin:10px 0px; padding:5px 10px; color:rgb(102,102,102); background:rgb(247,247,247)"> 
 <div style="word-wrap:break-word"> 
 <ol style="word-wrap:break-word; margin:1em 2em; padding:0px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;!-- d1的z-index为12，而d2的z-index为0，所以d1在d2的上面 --&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;div id="d1" style="position:relative;z-index: 12;"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;div id="d2" style="z-index: 0;margin-top:-20px;"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/div&gt;</li> 
 </ol> 
 </div> 
 复制代码 
 </div> &nbsp;&nbsp;3. 前提：boxes属于不同的stacking context，并且stacking contexts没有祖孙/父子关系 &nbsp; &nbsp;&nbsp; &nbsp;规则：boxes会向上沿着父box进行搜索，直到父boxes属于同一个stacking context为止，然后比较父boxes的z-index属性值，z-index属性值大的box更靠近用户。 
 <div style="word-wrap:break-word; overflow:hidden; margin:10px 0px; padding:5px 10px; color:rgb(102,102,102); background:rgb(247,247,247)"> 
 <div style="word-wrap:break-word"> 
 <ol style="word-wrap:break-word; margin:1em 2em; padding:0px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div id="d1" style="position:relative; z-index:10;"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; &lt;div id="d4" style="background:red; width:100px; height:100px;position:relative; z-index:9999;"&gt;d3&lt;/div&gt;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div id="d2" style="background:blue; width:50px; height:50px; position:relative; top: -120px; z-index:9;"&gt;d2&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div id="d3" style="background:green; width:50px; height:50px; position:relative; top: -80px; position:relative; z-index:11;"&gt;d3&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/div&gt;</li> 
 </ol> 
 </div> 
 复制代码 
 </div> <a href="http://www.html5cn.org/data/attachment/forum/201504/10/145121dbbdljqbqriqilhq.png" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/forum/201504/10/145121dbbdljqbqriqilhq.png" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> &nbsp;&nbsp;4. 前提：boxes属于不同的stacking context，并且stacking contexts为祖孙/父子关系 &nbsp; &nbsp;&nbsp; &nbsp;规则：属于子stacking context的box必定更靠近用户 
 <div style="word-wrap:break-word; overflow:hidden; margin:10px 0px; padding:5px 10px; color:rgb(102,102,102); background:rgb(247,247,247)"> 
 <div style="word-wrap:break-word"> 
 <ol style="word-wrap:break-word; margin:1em 2em; padding:0px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;div style="background:blue; width:100px; height:100px; position:relative; z-index:10;"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div style="background:red; width:50px; height:50px; position:relative; z-index:-10;"&gt;&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/div&gt;</li> 
 </ol> 
 </div> 
 复制代码 
 </div> <a href="http://www.html5cn.org/data/attachment/forum/201504/10/145150ydtettyeyeznxg23.png" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/forum/201504/10/145150ydtettyeyeznxg23.png" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 四、z-index的作用　　　　　　　　　　　　　　　　　　　　　　　　 &nbsp;&nbsp;啰嗦一句：同一个stacking context的z-index才具有可比性，也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。 &nbsp;&nbsp;它有两个作用：1. 设置box在其所属的stacking context下的stack level； &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; 2. 当z-index属性值非0时，则在该box中创建一个新的stacking context，而该box的子孙box默认属于这个新stacking context。 &nbsp;&nbsp;注意：z-index的默认值为auto，自动赋值为0。因此默认情况下不会创建新的stacking context。 &nbsp;&nbsp;z-index生效的阀门 &nbsp; &nbsp; z-index属性值仅对positioned box生效，而non-positioned box的z-index永远为0。 &nbsp; &nbsp; 也许你会举出如下反例： 
 <div style="word-wrap:break-word; overflow:hidden; margin:10px 0px; padding:5px 10px; color:rgb(102,102,102); background:rgb(247,247,247)"> 
 <div style="word-wrap:break-word"> 
 <ol style="word-wrap:break-word; margin:1em 2em; padding:0px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;div id="d1" style="z-index:10;"&gt;&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;script type="text/javascript"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;console.log(window.getComputedStyle(document.getElementById('d1'))['zIndex']); // 输出10 </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/script&gt;</li> 
 </ol> 
 </div> 
 复制代码 
 </div> &nbsp; &nbsp; 但抱歉的是，上面获取的是non-positioned element div#d1的z-index属性值，而不是non-positioned box的z-index属性值。 &nbsp; &nbsp; 对于positioned element，它会将z-index赋予给对应的positioned box，而non-positioned element则不会。 五、兼容性问题——IE6/7的诡异行为　　　　　　　　　　　　　　　　 &nbsp;&nbsp;IE6、7中并非当positioned box并且z-index不为0时才创建stacking context，而是positioned box就会创建stacking context。 
 <div style="word-wrap:break-word; overflow:hidden; margin:10px 0px; padding:5px 10px; color:rgb(102,102,102); background:rgb(247,247,247)"> 
 <div style="word-wrap:break-word"> 
 <ol style="word-wrap:break-word; margin:1em 2em; padding:0px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;style&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; .parent{width:200px; height:200px; padding:10px;} </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; .sub{text-align:right; font:15px Verdana;width:100px; height:100px;} </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; .lt50{left:50px;top:50px;} </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/style&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px"> </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;div style="position:absolute; background:lightgrey;" class="parent"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div style="position:absolute;z-index:20;background:darkgray;" class="sub"&gt;20&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div style="position:absolute;z-index:10;background:dimgray;" class="sub lt50"&gt;10&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px"> </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;div style="position:absolute;left:80px;top:80px;background:black;" class="parent"&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div style="position:absolute;z-index:2;background:darkgray;" class="sub"&gt;2&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp;&nbsp;&lt;div style="position:absolute;z-index:1;background:dimgray;" class="sub lt50"&gt;1&lt;/div&gt; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/div&gt;</li> 
 </ol> 
 </div> 
 复制代码 
 </div> 符合W3C标准的渲染效果： <a href="http://www.html5cn.org/data/attachment/forum/201504/10/1452440c9bnc14rb1y6nvz.png" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/forum/201504/10/1452440c9bnc14rb1y6nvz.png" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> IE6、7下的渲染效果： <a href="http://www.html5cn.org/data/attachment/forum/201504/10/1453297vfib2ukfro68klw.png" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/forum/201504/10/1453297vfib2ukfro68klw.png" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 六、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　 &nbsp;&nbsp;若有纰漏请大家指正，谢谢！&nbsp; &nbsp;&nbsp;尊重原创，转载请注明来自：<a href="http://www.cnblogs.com/fsjohnhuang/p/4333164.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">http://www.cnblogs.com/fsjohnhuang/p/4333164.html</a>&nbsp; 七、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　 《<a href="http://bbs.csdn.net/topics/350029443" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">说说标准——CSS核心可视化格式模型(visual formatting model)之十三：分层的显示(Layered presentation)&nbsp;</a>》 《<a href="http://bbs.csdn.net/topics/350035709" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">z-index 默认值引起的兼容性问题</a>》 <a href="http://www.w3.org/TR/CSS21/visuren.html#z-index" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">W3C Recommendation</a>-<a href="http://www.w3.org/TR/CSS21/visuren.html#z-index" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">Layered presentation</a> </td> 
 </tr> 
 </tbody> 
</table>