圖解一下啥是CSS堆疊上下文，啥是CSS堆疊層疊順序，讓你對css的疑惑少一點?

CSS 堆疊上下文是啥？

咱們有一個基本樣式的 div，樣式以下：

div{
    width: 200px;
    height: 200px;
    border:10px solid red;
    padding:15px;
    margin:12px;
}

效果以下：

這邊有個問題是： border 和 background是什麼關係 ？

這邊有兩個選項：

1. 平行的
2. border 更靠近用戶
3. background 更靠近用戶

大家會選擇哪一個呢？

其實弄懂這個很簡單的，咱們只須要把 border 設置成半透明就知道答案啦

border:10px solid rgba(255, 0, 0, 0, .3);

從運行結果就能夠看出，紅色透着綠色，因此是 border 更靠近用戶 。 這時候你就知道div 不是平的，在垂直屏幕上也是有層次關係的，那這個層次關係就叫作堆疊上下文。

接着咱們在 div 裏面寫個 ‘你好，世界’，效果以下：

這裏又引起了一個問題，這個 ‘你好，世界’， 是在哪層了，是在 border 上仍是在 border 與 background 之間呢？

這邊咱們只須要把'你好'移動到border上就可知道緣由了，那怎麼把文字移動過去呢？這邊咱們用 text-indent ,樣式以下：

div{
  width: 200px;
  height: 200px;
  border:10px solid rgb(255, 0, 0);
  padding:15px;
  margin:12px;
  background-color: green;
  text-indent: -20px;
}

效果以下：

從運行效果就能夠看了，文字是在 border上面的，因此文字區域（內聯元素）是更靠近用戶的

那若是div 裏面還有一個 div 呢？代碼結構以下：

// html
  <div class="parent">
    你好，CSS世界
    <div class="child"></div>
  </div>

// css
   .parent{
      width: 200px;
      height: 200px;
      border:10px solid rgb(255, 0, 0);
      padding:15px;
      margin:12px;
      background-color: green;
      text-indent: -20px;
    }
    .child{
      height: 20px;
      background:purple;
    }

效果以下：

又引起了一個問題，紫色區域是比文字區域高仍是相反呢？

那怎麼驗證這個問題了？咱們只要把裏面的 div 往上移動就行，注意這裏不能用 position由於爲改變層級結構， 咱們只要用 margin-top 就好了，如：

margin-top:-20px;

效果以下：

你會發現文字區域是在上面的。這邊就得出一個結論：

若是div裏面有塊級元素，塊級元素是蓋不住內聯元素的，換句話說內聯元素離用戶更近

那若是裏面div有文字呢？ 這時咱們須要 寫幾個字，效果以下：

你會發現 子元素的文字區域會蓋住父元素的文字區域，因此這邊又有一個小的結論：文字區域後出現的會覆蓋前出現的。

浮動元素

來一個基本結構：

// html
  <div class="parent">
      你好
    <div class="float">

    </div>
  </div>
  // css
.parent{
  width: 200px;
  height: 200px;
  border:10px solid rgb(255, 0, 0);
  padding:15px;
  margin:12px;
  background-color: green;
  color: aliceblue;
}
.float{
  height: 40px;
  width: 40px;
  background:purple;
  float: left;
}

效果以下：

上面代碼就不解釋了，大家確定都 知道 ？按上面的套路，這裏一樣仍是那個問題：你好在上面呢仍是這個 float 元素呢？

要驗證這個問題，一樣使用 text-indent 那文字向左動點，這裏我直接 上效果了：

從效果圖，咱們能夠得出 文字區域是在 浮雲元素上面的。

那浮動元素是在 文字區域與內部塊級元素之間呢，仍是內部塊級與border元素之間呢？換句話說就是 浮動元素與塊級元素哪一個離用戶更近？

咱們直接在父級元素寫一個 child:

// hmtl
  <div class="parent">
      你好
    <div class="float"></div>
    <div class="child"></div>
  </div>

  // css
  
 .child{
  height: 20px;
  background: black;
}

效果以下：

從上能夠看出浮雲元素蓋住了 child元素，說明浮動元素的層級是比塊級元素高的。即浮動元素是在文字區域與塊級元素之間的。

那浮動元素裏面的文字與外面的文字是怎麼樣的呢？這邊我直接在浮動裏面加了 float文字，效果以下：

你會發現 浮動裏面的文字是蓋不住浮動外面文字的。

絕對定位元素

在上面的基礎上咱們增長一個 relative 元素，以下：

// htmk
  <div class="parent">
      你好
    <div class="float">floatt</div>
    <div class="child"></div>
    <div class="relative"></div>
  </div>
  
 // css
.relative{
  width: 100px;
  height: 100px;
  background: pink;
  margin-top: -15px;
}

效果以下：

這時咱們給類relative 加上一個：

position:relative;

效果以下：

你會發現 relative 元素蓋住了浮動元素，這說明 給元素加一個 relative 定位會增長對應的一個層級。檢查 relative 元素，會看到：

加了 position:relative定位會多了一個 z-index:auto 的東西，實際上你定位，都是按z-index來計算的。

這裏咱們給沒有定位的 child元素加上一個z-index:

<div class="parent">
      你好
    <div class="float">floatt</div>
    <div class="child" style="z-index:99999"></div>
    <div class="relative"></div>
  </div>

效果以下：

你會發現 child 元素並無蓋住 relative 元素！

這邊直接 給告終論了：z-index 只有在 position:relative|absolute
纔有效果，若是都是relative，z-index同樣，那麼後面會蓋前面，z-index值大的會蓋住小的。

咱們接着在原有上加一個relative2，樣式以下：

.relative2{
  width: 100px; 
  height: 150px;
  background: gold;
  margin-top: -15px;
  position: relative;
}

效果以下：

此時給 relative2 加上一個 z-index:-1,在看

又得出一個結論：z-index爲負值時，是位於 background下面的

這時，咱們給.parent元素添加如下兩個樣式：

position: relative;
  z-index: 0;

這時的效果以下：

這時奇怪的事情就出現了，z-index: -1 的跑到上面來了。

MDN上有對什麼堆疊給出了一些內容，以下 ：

其實咱們給.parent元素設置z-index：0 ，根據MDN說的，咱們其實已經 創造一個層疊上下文 。

那什麼是堆疊上下文？下面是張鑫旭一段原文：

其實這跟美國一個大法官說的一句話很像：我不知道什麼色情，但當我看到它是我就知道什麼是色情。

CSS堆疊上下文也是相似的道理，你很難說出什麼是CSS堆疊上下文，但只要它知足MDN列出的幾種狀況，它就是CSS堆疊上下文。

CSS堆疊層疊順序

CSS堆疊上下文是有一個垂直屏幕上有一個上關係的，它們的關係以下：

因此這就解釋爲何z-index爲負值的時候，它會在 background上面，由於咱們 z-index:0 時就建立一個CSS堆疊上下文。

CSS堆疊上下文做用

下面給一個基本的內容：

// html
  <div class="parent">
    <div class="a relative">a
      <div class="a1">a1</div>
    </div>
    <div class="b relative">b
      <div class="b1">b1</div>
    </div>
  </div>
  // css
 .parent{
  width: 200px;
  height: 200px;
  border:10px solid rgb(255, 0, 0);
  padding:15px;
  margin:12px;
  background-color: green;
}
.relative{
  width:100px;
  height:100px;
  background: orange;
  position: relative;
  border:1px solid red;
}
.a1{
  position: relative;
  background:green;
}
.b1{
  position: relative;
  background:red;
}

效果以下：

接着咱們在b1在添加如下樣式：

margin-top: -90px;

b1會蓋住a1，這個咱們應該知道是什麼緣由了吧？由於a1 b1都是塊級元素，後面會蓋住前面的，沒毛病！

那麼 a1 和 b1 的CSS堆疊上下文是誰？

咱們能夠MDN給出的第一句：

根元素，因此a1 和 b1的CSS堆疊上下文就是Html

接着給a1如下樣式：

z-index: 2;

接着給b1如下樣式：

z-index: 0;

效果以下：

a1跑到b1上面了，這個很好理解，由於 a1 的z-index:2 比 b1的z-index:0 在，因此a1在上面。

如今有一個問題，a1是永遠蓋住b1嗎？

這邊你可能會說，a1 的z-index:2比 b1的 z-index:0 永遠都大，固然會蓋住b1呀！是這樣嗎？咱們試着改變一下CSS堆疊上下文。

咱們分別給a 和 b各作一個CSS堆疊上下文： 以下：

.a{
  position: relative;
  z-index: 1;
}
.b{
  position: relative;
  z-index: 1;
}

效果以下：

先分析a 和 b它們是誰覆蓋誰，由於 兩個定位和z-index都同樣因此 b 會覆蓋 a。還有一個現象有沒有發現， b1 蓋住了 a1? 明明 a1 的 z-index 大於 b1,這是爲何？爲何小的會蓋住大的？爲何？

由於 b 比 a 高一點，因此 b 裏面的內容都會比 a 高一點。這就是 CSS堆疊上下文一個特性。

好比說阿里巴巴有一個奇怪的部門叫作政委，是由馬雲等一些創始人組成的。在這個部門裏面，你是否是都比其它部門要高級點。

因此 b1 雖然在 b 裏面等級爲0，在 b 是高級的一個部門，就是能夠壓過你 a 這個部門裏面的 2 級的人。

今天說這些了，若是還太明白能夠看看如下的內容 ：

張鑫旭的深刻理解CSS中的層疊上下文和層疊順序
MDN 文檔

你的點贊是我持續分享好東西的動力，歡迎點贊！

一個笨笨的碼農，個人世界只能終身學習！

更多內容請關注公衆號《大遷世界》！