層疊等級和層疊上下文

時間 2019-11-07

標籤層疊等級上下文简体版

原文原文鏈接

層疊等級和層疊上下文

以往，因爲本身使用z-index的頻率不大，因此對這個CSS屬性存在比較片面的認識。一直認爲z-index就是用來描述定義一個元素在屏幕Z軸上的堆疊順序。z-index值越大在Z軸web

上就越靠上，也就是離屏幕觀察者越近。最後才發現這個認識存在很大的問題：bash

1 首先，z-index屬性值並非在任何元素上都有效果。它僅在定位元素（定義了position屬性，且屬性值爲非static值的元素）上有效果。佈局

2 判斷元素在Z軸上的堆疊順序，不只僅是直接比較兩個元素的z-index值的大小，這個堆疊順序實際由元素的層疊上下文、層疊等級共同決定。flex

要想徹底理解一個東西，首先要明白它是什麼，也就是它的定義。咱們先看看上面提到的層疊上下文、層疊等級、層疊順序都是什麼？定義又太過抽象，後面會再用一個具象的比喻來spa

讓你完全明白它們究竟是什麼，有什麼聯繫。設計

什麼是「層疊上下文」

層疊上下文(stacking context)，是HTML中一個三維的概念。在CSS2.1規範中，每一個盒模型的位置是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸。通常狀況下，元素在3d

頁面上沿X軸Y軸平鋪，咱們察覺不到它們在Z軸上的層疊關係。而一旦元素髮生堆疊，這時就能發現某個元素可能覆蓋了另外一個元素或者被另外一個元素覆蓋。code

若是一個元素含有層疊上下文，(也就是說它是層疊上下文元素)，咱們能夠理解爲這個元素在Z軸上就「高人一等」，最終表現就是它離屏幕觀察者更近。orm

什麼是「層疊等級」

那麼，層疊等級指的又是什麼？層疊等級(stacking level，叫「層疊級別」/「層疊水平」也行)cdn

在同一個層疊上下文中，它描述定義的是該層疊上下文中的層疊上下文元素在Z軸上的上下順序。
在其餘普通元素中，它描述定義的是這些普通元素在Z軸上的上下順序。

說到這，可能不少人疑問了，不論在層疊上下文中仍是在普通元素中，層疊等級都表示元素在Z軸上的上下順序，那就直接說它描述定義了全部元素在Z軸上的上下順序就OK啊！爲何要分開描述？

爲了說明緣由，先舉個栗子：

具象的比喻：咱們以前說到，處於層疊上下文中的元素，就像是元素當了官，等級天然比普通元素高。再想象一下，假設一個官員A是個省級領導，他下屬有一個祕書a-1，家裏有一個保姆a-2。另外一個官員B是一個縣級領導，他下屬有一個祕書b-1，家裏有一個保姆b-2。a-1和b-1雖然都是祕書，可是你想一個省級領導的祕書和一個縣級領導的祕書之間有可比性麼？甚至保姆a-2都要比祕書b-1的等級高得多。誰大誰小，誰高誰低一目瞭然，因此根本沒有比較的意義。只有在A下屬的a-一、a-2以及B下屬的b-一、b-2中相互比較大小高低纔有意義。

再類比回「層疊上下文」和「層疊等級」，就得出一個結論：

1 普通元素的層疊等級優先由其所在的層疊上下文決定。

2 層疊等級的比較只有在當前層疊上下文元素中才有意義。不一樣層疊上下文中比較層疊等級是沒有意義的。

前面說了那麼多，知道了「層疊上下文」和「層疊等級」，其中還有一個最關鍵的問題：到底如何產生層疊上下文呢？如何讓一個元素變成層疊上下文元素呢？

其實，層疊上下文也基本上是有一些特定的CSS屬性建立的，通常有3種方法：

1 HTML中的根元素自己j就具備層疊上下文，稱爲「根層疊上下文」。

2 普通元素設置position屬性爲非static值並設置z-index屬性爲具體數值，產生層疊上下文。

3 CSS3中的新屬性也能夠產生層疊上下文。

栗子1: 有兩個div，p.a、p.b被包裹在一個div裏，p.c被包裹在另外一個盒子裏，只爲.a、.b、.c設置position和z-index屬性

<style>
  div { 
    position: relative; 
    width: 100px; 
    height: 100px; 
  } 
  p { 
    position: absolute; 
    font-size: 20px; 
    width: 100px; 
    height: 100px; 
  } 
  .a { 
    background-color: blue; 
    z-index: 1; 
  } 
  .b { 
    background-color: green; 
    z-index: 2; 
    top: 20px; 
    left: 20px; 
  } 
  .c { 
    background-color: red; 
    z-index: 3; 
    top: -20px; 
    left: 40px; 
  }
</style>
 
<body> 
  <div> 
    <p class="a">a</p> 
    <p class="b">b</p> 
  </div>
 
  <div> 
    <p class="c">c</p> 
  </div> 
</body>
複製代碼

由於p.a、p.b、p.c三個的父元素div都沒有設置z-index，因此不會產生層疊上下文，因此.a、.b、.c都處於由標籤產生的「根層疊上下文」中，屬於同一個層疊上下文，此時誰的z-index值大，誰在上面。

栗子2：有兩個div，p.a、p.b被包裹在一個div裏，p.c被包裹在另外一個盒子裏，同時爲兩個div和.a、.b、.c設置position和z-index屬性

<style>
  div {
    width: 100px;
    height: 100px;
    position: relative;
  }
  .box1 {
    z-index: 2;
  }
  .box2 {
    z-index: 1;
  }
  p {
    position: absolute;
    font-size: 20px;
    width: 100px;
    height: 100px;
  }
  .a {
    background-color: blue;
    z-index: 100;
  }
  .b {
    background-color: green;
    top: 20px;
    left: 20px;
    z-index: 200;
  }
  .c {
    background-color: red;
    top: -20px;
    left: 40px;
    z-index: 9999;
  }
</style>
 
<body>
  <div class="box1">
    <p class="a">a</p>
    <p class="b">b</p>
  </div>
 
  <div class="box2">
    <p class="c">c</p>
  </div>
</body>
複製代碼

咱們發下，雖然p.c元素的z-index值爲9999，遠大於p.a和p.b的z-index值，可是因爲p.a、p.b的父元素div.box1產生的層疊上下文的z-index的值爲2，p.c的父元素div.box2所產生的層疊上下文的z-index值爲1，因此p.c永遠在p.a和p.b下面。

同時，若是咱們只更改p.a和p.b的z-index值，因爲這兩個元素都在父元素div.box1產生的層疊上下文中，因此，誰的z-index值大，誰在上面。

什麼是「層疊順序」

說完「層疊上下文」和「層疊等級」，咱們再來講說「層疊順序」。「層疊順序」(stacking order)表示元素髮生層疊時按照特定的順序規則在Z軸上垂直顯示。

因而可知，前面所說的「層疊上下文」和「層疊等級」是一種概念，而這裏的「層疊順序」是一種規則。

在不考慮CSS3的狀況下，當元素髮生層疊時，層疊順訊遵循上面途中的規則。這裏值得注意的是：

1 左上角"層疊上下文background/border"指的是層疊上下文元素的背景和邊框。

2 inline/inline-block元素的層疊順序要高於block(塊級)/float(浮動)元素。

3 單純考慮層疊順序，z-index: auto和z-index: 0在同一層級，但這兩個屬性值自己是有根本區別的。

對於上面第2條，爲何inline/inline-block元素的層疊順序要高於block(塊級)/float(浮動)元素？這個你們能夠思考一下！其實很簡單，像border/background屬於裝飾元素的屬性，浮動和塊級元素通常用來頁面佈局，而網頁設計之初最重要的就是文字內容，因此在發生層疊時會優先顯示文字內容，保證其不被覆蓋。

**一、首先先看要比較的兩個元素是否處於同一個層疊上下文中： **

1.1若是是，誰的層疊等級大，誰在上面（怎麼判斷層疊等級大小呢？——看「層疊順序」圖）。

1.2若是兩個元素不在統一層疊上下文中，請先比較他們所處的層疊上下文的層疊等級。

二、當兩個元素層疊等級相同、層疊順序相同時，在DOM結構中後面的元素層疊等級在前面元素之上。

<style>
  .box1, .box2 {
    position: relative;
    z-index: auto;
  }
  .child1 {
    width: 200px;
    height: 100px;
    background: #168bf5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .child2 {
    width: 100px;
    height: 200px;
    background: #32c292;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
</style>
</head>
 
<body>
  <div class="box1">
    <div class="child1"></div>
  </div>
 
  <div class="box2">
    <div class="child2"></div>
  </div>
</body>
複製代碼

.box1/.box2雖然設置了position: relative，可是z-index: auto的狀況下，這兩個div仍是普通元素，並無產生層疊上下文。因此，child1/.child2屬於元素的「根層疊上下文」中，此時，誰的z-index值大，誰在上面。

對於上面代碼中的CSS代碼，咱們只把.box1/.box2的z-index屬性值改成數值0，其他不變。

.box1, .box2 {
  position: relative;
  z-index: 0;
}
複製代碼

此時，咱們發現，僅僅修改了.box1/.box2的z-index屬性值改成數值0，最終結果徹底相反。這時.child2覆蓋在了.child1上面。緣由是什麼呢？

很簡單：由於設置z-index: 0後，.box1/.box2產生了各自的層疊上下文，這時候要比較.child1/.child2的層疊關係徹底由父元素.box1/.box2的層疊關係決定。可是.box1/.box2的z-index值都爲0，都是塊級元素（因此它們的層疊等級，層疊順序是相同的），這種狀況下，在DOM結構中後面的覆蓋前面的，因此.child2就在上面。

CSS3中的屬性對層疊上下文的影響

CSS3中出現了不少新屬性，其中一些屬性對層疊上下文也產生了很大的影響。以下：

父元素的display屬性值爲flex|inline-flex，子元素z-index屬性值不爲auto的時候，子元素爲層疊上下文元素；
元素的opacity屬性值不是1
元素的transform屬性值不是none；
元素mix-blend-mode屬性值不是normal`；
元素的filter屬性值不是none；
元素的isolation屬性值是isolate；
will-change指定的屬性值爲上面任意一個；
元素的-webkit-overflow-scrolling屬性值設置爲touch

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。