摘要：即浮動(dòng)元素是在文字區(qū)域與塊級(jí)元素之間的。堆疊上下文也是類似的道理，你很難說出什么是堆疊上下文，但只要它滿足列出的幾種情況，它就是堆疊上下文。這就是堆疊上下文一個(gè)特性。

我們有一個(gè)基本樣式的 div，樣式如下：

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

效果如下：

這邊有個(gè)問題是： border 和 background是什么關(guān)系 ？

這邊有兩個(gè)選項(xiàng)：

平行的

border 更靠近用戶

background 更靠近用戶

你們會(huì)選擇哪個(gè)呢？

其實(shí)弄懂這個(gè)很簡單的，我們只需要把 border 設(shè)置成半透明就知道答案啦

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

從運(yùn)行結(jié)果就可以看出，紅色透著綠色，所以是 border 更靠近用戶 。 這時(shí)候你就知道div 不是平的，在垂直屏幕上也是有層次關(guān)系的，那這個(gè)層次關(guān)系就叫做堆疊上下文。

接著我們?cè)?div 里面寫個(gè) ‘你好，世界’，效果如下：

這里又引發(fā)了一個(gè)問題，這個(gè) ‘你好，世界’， 是在哪層了，是在 border 上還是在 border 與 background 之間呢？

這邊我們只需要把"你好"移動(dòng)到border上就可知道原因了，那怎么把文字移動(dòng)過去呢？這邊我們用 text-indent ,樣式如下：

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

效果如下：

從運(yùn)行效果就可以看了，文字是在 border上面的，所以文字區(qū)域（內(nèi)聯(lián)元素）是更靠近用戶的

那如果div 里面還有一個(gè) div 呢？代碼結(jié)構(gòu)如下：

 // html
  

    你好，CSS世界
    

  

    // 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;
    }

效果如下：

又引發(fā)了一個(gè)問題，紫色區(qū)域是比文字區(qū)域高還是相反呢？

那怎么驗(yàn)證這個(gè)問題了？我們只要把里面的 div 往上移動(dòng)就行，注意這里不能用 position因?yàn)闉楦淖儗蛹?jí)結(jié)構(gòu)， 我們只要用 margin-top 就行了，如：

    margin-top:-20px;

效果如下：

你會(huì)發(fā)現(xiàn)文字區(qū)域是在上面的。這邊就得出一個(gè)結(jié)論：

如果div里面有塊級(jí)元素，塊級(jí)元素是蓋不住內(nèi)聯(lián)元素的，換句話說內(nèi)聯(lián)元素離用戶更近

那如果里面div有文字呢？ 這時(shí)我們需要 寫幾個(gè)字，效果如下：

你會(huì)發(fā)現(xiàn) 子元素的文字區(qū)域會(huì)蓋住父元素的文字區(qū)域，所以這邊又有一個(gè)小的結(jié)論：文字區(qū)域后出現(xiàn)的會(huì)覆蓋前出現(xiàn)的。

來一個(gè)基本結(jié)構(gòu)：

  // html
  

      你好
    


    
  
  // 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;
}

效果如下：

上面代碼就不解釋了，你們肯定都 知道 ？按上面的套路，這里同樣還是那個(gè)問題：你好在上面呢還是這個(gè) float 元素呢？

要驗(yàn)證這個(gè)問題，同樣使用 text-indent 那文字向左動(dòng)點(diǎn)，這里我直接 上效果了：

從效果圖，我們可以得出 文字區(qū)域是在 浮云元素上面的。

那浮動(dòng)元素是在 文字區(qū)域與內(nèi)部塊級(jí)元素之間呢，還是內(nèi)部塊級(jí)與border元素之間呢？換句話說就是 浮動(dòng)元素與塊級(jí)元素哪個(gè)離用戶更近？

我們直接在父級(jí)元素寫一個(gè) child:

   // hmtl
  

      你好
    

    

  

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

效果如下：

從上可以看出浮云元素蓋住了 child元素，說明浮動(dòng)元素的層級(jí)是比塊級(jí)元素高的。即浮動(dòng)元素是在文字區(qū)域與塊級(jí)元素之間的。

那浮動(dòng)元素里面的文字與外面的文字是怎么樣的呢？這邊我直接在浮動(dòng)里面加了 float文字，效果如下：

你會(huì)發(fā)現(xiàn) 浮動(dòng)里面的文字是蓋不住浮動(dòng)外面文字的。

在上面的基礎(chǔ)上我們?cè)黾右粋€(gè) relative 元素，如下：

  // htmk
  

      你好
    
floatt
    

    

  
  
 // css
.relative{
  width: 100px;
  height: 100px;
  background: pink;
  margin-top: -15px;
}

效果如下：

這時(shí)我們給類relative 加上一個(gè)：

position:relative;

效果如下：

你會(huì)發(fā)現(xiàn) relative 元素蓋住了浮動(dòng)元素，這說明 給元素加一個(gè) relative 定位會(huì)增加對(duì)應(yīng)的一個(gè)層級(jí)。檢查 relative 元素，會(huì)看到：

加了 position:relative定位會(huì)多了一個(gè) z-index:auto 的東西，實(shí)際上你定位，都是按z-index來計(jì)算的。

這里我們給沒有定位的 child元素加上一個(gè)z-index:

  

      你好
    
floatt
    

    

  

效果如下：

你會(huì)發(fā)現(xiàn) child 元素并沒有蓋住 relative 元素！

這邊直接 給了結(jié)論了：z-index 只有在 position:relative|absolute
才有效果，如果都是relative，z-index一樣，那么后面會(huì)蓋前面，z-index值大的會(huì)蓋住小的。

我們接著在原有上加一個(gè)relative2，樣式如下：

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

效果如下：

此時(shí)給 relative2 加上一個(gè) z-index:-1,在看

又得出一個(gè)結(jié)論：z-index為負(fù)值時(shí)，是位于 background下面的

這時(shí)，我們給.parent元素添加以下兩個(gè)樣式：

  position: relative;
  z-index: 0;    
  

這時(shí)的效果如下：

這時(shí)奇怪的事情就出現(xiàn)了，z-index: -1 的跑到上面來了。

MDN上有對(duì)什么堆疊給出了一些內(nèi)容，如下 ：

其實(shí)我們給.parent元素設(shè)置z-index：0 ，根據(jù)MDN說的，我們其實(shí)已經(jīng) 創(chuàng)造一個(gè)層疊上下文 。

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

其實(shí)這跟美國一個(gè)大法官說的一句話很像：我不知道什么色情，但當(dāng)我看到它是我就知道什么是色情。

CSS堆疊上下文也是類似的道理，你很難說出什么是CSS堆疊上下文，但只要它滿足MDN列出的幾種情況，它就是CSS堆疊上下文。

CSS堆疊上下文是有一個(gè)垂直屏幕上有一個(gè)上關(guān)系的，它們的關(guān)系如下：

所以這就解釋為什么z-index為負(fù)值的時(shí)候，它會(huì)在 background上面，因?yàn)槲覀?z-index:0 時(shí)就創(chuàng)建一個(gè)CSS堆疊上下文。

下面給一個(gè)基本的內(nèi)容：

  // html
  

    
a
      
a1
    
    
b
      
b1
    
  
  // 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;
}

效果如下：

接著我們?cè)赽1在添加以下樣式：

   margin-top: -90px;

b1會(huì)蓋住a1，這個(gè)我們應(yīng)該知道是什么原因了吧？因?yàn)閍1 b1都是塊級(jí)元素，后面會(huì)蓋住前面的，沒毛病！

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

我們可以MDN給出的第一句：

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

接著給a1以下樣式：

   z-index: 2;
   

接著給b1以下樣式：

z-index: 0;    

效果如下：

a1跑到b1上面了，這個(gè)很好理解，因?yàn)?a1 的z-index:2 比 b1的z-index:0 在，所以a1在上面。

這邊你可能會(huì)說，a1 的z-index:2比 b1的 z-index:0 永遠(yuǎn)都大，當(dāng)然會(huì)蓋住b1呀！是這樣嗎？我們?cè)囍淖円幌翪SS堆疊上下文。

我們分別給a 和 b各做一個(gè)CSS堆疊上下文： 如下：

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

效果如下：

先分析a 和 b它們是誰覆蓋誰，因?yàn)?兩個(gè)定位和z-index都一樣所以 b 會(huì)覆蓋 a。還有一個(gè)現(xiàn)象有沒有發(fā)現(xiàn)， b1 蓋住了 a1? 明明 a1 的 z-index 大于 b1,這是為什么？為什么小的會(huì)蓋住大的？為什么？

因?yàn)?b 比 a 高一點(diǎn)，所以 b 里面的內(nèi)容都會(huì)比 a 高一點(diǎn)。這就是 CSS堆疊上下文一個(gè)特性。

比如說阿里巴巴有一個(gè)奇怪的部門叫做政委，是由馬云等一些創(chuàng)始人組成的。在這個(gè)部門里面，你是不是都比其它部門要高級(jí)點(diǎn)。

所以 b1 雖然在 b 里面等級(jí)為0，在 b 是高級(jí)的一個(gè)部門，就是可以壓過你 a 這個(gè)部門里面的 2 級(jí)的人。

今天說這些了，如果還太明白可以看看以下的內(nèi)容 ：

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

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

一個(gè)笨笨的碼農(nóng)，我的世界只能終身學(xué)習(xí)！

更多內(nèi)容請(qǐng)關(guān)注公眾號(hào)《大遷世界》！