CSSz-index嗎

巴扎黑原創: 2017-06-28 09:34:521331瀏覽

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　的彈跳窗效果，懂得透過z-index來調整元素間的層疊關係就夠了。但要將多個彈跳窗間層疊關係給處理好，那麼充分理解z-index背後的原理及相容性問題就是必要的知識儲備了。本文作為W3C Recommendation-Layered presentation學習後整理的筆記，以便日後查閱。由於將英文名詞翻譯為中文名詞容易產生歧義（如Normal flow翻譯為文檔流），因此本文將直接採用原英文名詞，而涉及到的英文

名詞解釋

#如下：

non-positioned element：無

CSS定位

的元素，也就是position: static的元素。 positioned element：CSS定位的元素，也就是position: relative/absolute/fixed的元素。

box：文檔樹由element組成，渲染樹由box組成，實際進行元素大小、佈局渲染操作的物件是box進行而不是element。 box由element對應產生（也有是anonymous box不是由element對應生成，而是渲染器依照規則自動產生），non-positioned element對應的是non-position box，positioned element對應的是position box。

z-axis：box定位座標系中的z軸。

stacking context：層疊上下文，z-axis的基本組成單位。 box與stacking context的映射關係為N:1。每個stacking context有一個父context（除了root stacking context外）和0~N個子context。

root stacking context：與根box（html/body對應的box）對應的層疊上下文，是其他stacking context的祖先context，root stacking context的範圍覆蓋整條z- axis。

stack level：層疊等級，當N個box位於同一個stacking context中，則透過stack level來決定它們位於z-axis上的位置。注意：stack level為相對值而非如px那樣為絕對值。

二、解層顯示

其實我們常接觸到的z-index只是分層顯示中的一個屬性而已，而理解z-index背後的原理實質上就是要理解分層顯示原理。下面我們透過一個範例來認識分層顯示涉及的物件和屬性（z-axis、(root) stacking context、box、stack level）以及它們之間的關係。 HTML Markup

<style type="text/css">
  p{position:relative;}</style>
<body>
  <p id="d1" style="z-index:10;">
    <p id="d4" style="z-index:-9999;"></p>
  </p>
  <p id="d2" style="z-index:8;"></p>
  <p id="d3" style="z-index:9;"></p>
  <p id="p1"><p>
</body>

說明：

1. 在建構渲染樹時會為element產生對應的box，所以p#d1->d1:box,p#d2->d2:box,p#d3->d3:box,p#d4->d4:box,p#p1 ->p1:box。

2. 對positioned box而言，若z-index屬性值不是0，則會建立一個新的stacking context，且其子孫box將屬於這個新stacking context。

3. 同一個stacking context的z-index才具有可比性，也就是說在討論z-index時必須帶說明是哪個stacking context下的z-index。如範例般，雖然-9999比10小，但由於d4:box和d1:box位於不同的stacking context，因此無法判斷哪個box更靠近使用者。

三、層疊規則　　　　　　　　　　　　　　　　　　　　　　　到底哪個box更靠近使用者。

1. 前提：boxes屬於同一個stacking context，並且z-index相同

規則：依照box對應的element在文檔樹的順序，後者比前者更靠近使用者（back-to-front）

<!-- 两种情况下，d2均排在d1的后面，因此d2在z-axis上位于d1的上面 -->
<p id="d1">
  <p id="d2">
  </p>
</p>

<p id="d1">
</p>
<p id="d2">
</p

2. 前提：boxes屬於同一個stacking context，且z- index不同

規則：z-index屬性值大的box更靠近使用者

<!-- d1的z-index为12，而d2的z-index为0，所以d1在d2的上面 -->
<p id="d1" style="position:relative;z-index: 12;">
</p>
<p id="d2" style="z-index: 0;margin-top:-20px;">
</p

3 . 前提：boxes屬於不同的stacking context，且stacking contexts沒有祖孫/父子關係

规则：boxes会向上沿着父box进行搜索，直到父boxes属于同一个stacking context为止，然后比较父boxes的z-index属性值，z-index属性值大的box更靠近用户。

<p>
  <p id="d1" style="position:relative; z-index:10;">
    <p id="d4" style="background:red; width:100px; height:100px;position:relative; z-index:9999;">d3</p> 
  </p>
  <p id="d2" style="background:blue; width:50px; height:50px; position:relative; top: -120px; z-index:9;">d2</p>
  <p id="d3" style="background:green; width:50px; height:50px; position:relative; top: -80px; position:relative; z-index:11;">d3</p>
</p>

4. 前提：boxes属于不同的stacking context，并且stacking contexts为祖孙/父子关系

规则：属于子stacking context的box必定更靠近用户

<p style="background:blue; width:100px; height:100px; position:relative; z-index:10;">
  <p style="background:red; width:50px; height:50px; position:relative; z-index:-10;"></p>
</p>

5. 前提：boxes属于相同的stacking context，并且两者都是non-positioned element。

规则：float:left|right的元素必定更靠近用户

四、z-index的作用　　　　　　　　　　　　　　　　　　　　　　　　

啰嗦一句：同一个stacking context的z-index才具有可比性，也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。

它有两个作用：1. 设置box在其所属的stacking context下的stack level；

2. 当z-index属性值非0时，则在该box中创建一个新的stacking context，而该box的子孙box默认属于这个新stacking context。

注意：z-index的默认值为auto，自动赋值为0。因此默认情况下不会创建新的stacking context。

z-index生效的阀门

z-index属性值仅对positioned box生效，而non-positioned box的z-index永远为0。

也许你会举出如下反例：

<p id="d1" style="z-index:10;"></p>
<script type="text/javascript">
  console.log(window.getComputedStyle(document.getElementById('d1'))['zIndex']); // 输出10</script>

但抱歉的是，上面获取的是non-positioned element p#d1的z-index属性值，而不是non-positioned box的z-index属性值。

对于positioned element，它会将z-index赋予给对应的positioned box，而non-positioned element则不会。

五、兼容性问题——IE6/7的诡异行为　　　　　　　　　　　　　　　　

IE6、7中并非当positioned box并且z-index不为0时才创建stacking context，而是positioned box就会创建stacking context。

<style>
    .parent{width:200px; height:200px; padding:10px;}
    .sub{text-align:right; font:15px Verdana;width:100px; height:100px;}
    .lt50{left:50px;top:50px;}</style>
 
<p style="position:absolute; background:lightgrey;" class="parent">
  <p style="position:absolute;z-index:20;background:darkgray;" class="sub">20</p>
  <p style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</p>
</p>
 
<p style="position:absolute;left:80px;top:80px;background:black;" class="parent">
  <p style="position:absolute;z-index:2;background:darkgray;" class="sub">2</p>
  <p style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</p>
</p>

符合W3C标准的渲染效果：

IE6、7下的渲染效果：

六、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　

若有纰漏请大家指正，谢谢！

尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/4333164.html ^_^肥仔John

七、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　

《说说标准——CSS核心可视化格式模型(visual formatting model)之十三：分层的显示(Layered presentation) 》

《z-index 默认值引起的兼容性问题》

W3C Recommendation-Layered presentation

以上是CSSz-index嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css中z-index的不一樣的用法下一篇：css中z-index的不一樣的用法

看更多