CSS堆疊上下文有什么作用

CSS堆疊上下文有什么作用？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

CSS 堆疊上下文是啥？

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

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

效果如下：

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

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

1. 平行的

2. border 更靠近用戶

3. background 更靠近用戶

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

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

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

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

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

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

這邊我們只需要把'你好'移動(dòng)到border上就可知道原因了，那怎么把文字移動(dòng)過(guò)去呢？這邊我們用 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
  <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;
    }

效果如下：

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

那怎么驗(yàn)證這個(gè)問(wèn)題了？我們只要把里面的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)元素的，換句話說(shuō)內(nèi)聯(lián)元素離用戶更近

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

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

浮動(dòng)元素

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

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

效果如下：

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

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

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

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

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

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

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

效果如下：

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

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

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

絕對(duì)定位元素

在上面的基礎(chǔ)上我們?cè)黾右粋€(gè) 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;
}

效果如下：

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

position:relative;

效果如下：

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

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

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

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

效果如下：

你會(huì)發(fā)現(xiàn) child 元素并沒(méi)有蓋住 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 的跑到上面來(lái)了。

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

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

那什么是堆疊上下文？下面是張?chǎng)涡褚欢卧模?/p>

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

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

CSS堆疊層疊順序

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

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

CSS堆疊上下文作用

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

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

效果如下：

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

   margin-top: -90px;

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

那么 a1 和  b1 的CSS堆疊上下文是誰(shuí)？

我們可以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在上面。

現(xiàn)在有一個(gè)問(wèn)題，a1是永遠(yuǎn)蓋住b1嗎？

這邊你可能會(huì)說(shuō)，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它們是誰(shuí)覆蓋誰(shuí)，因?yàn)?兩個(gè)定位和z-index都一樣所以 b 會(huì)覆蓋 a。還有一個(gè)現(xiàn)象有沒(méi)有發(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è)特性。

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

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

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)CSS堆疊上下文有什么作用大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。