5分鐘搞懂z-index與層疊上下文

時間 2019-11-08

標籤 5分 index 層疊上下文简体版

原文原文鏈接

前言

相信每個前端小夥伴都使用 z-index 來作過一些蒙版的層級控制，可是你是否瞭解層疊上下文這個概念呢，你在使用 z-index 來控制層級的時候，有沒有遇到過一些想不通的問題呢？若是有的話，不妨花點時間來了解 CSS 中的層疊規則。css

一個小問題

如今設計提供了一個分享卡片樣式：html

要實現紅框中的樣式，咱們應該很天然的想到使用僞元素來給標題添加這個帶有漸變色的自定義下劃線。簡化代碼以下：

<body>
    <div class="card">
        <div class="title">
            我有下劃線
        </div>
    </div>
</body>
複製代碼

<style>
.card{
    background:#fff;
}
.title {
    position: relative;
    width: 100px;
}
.title::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-image: linear-gradient(to left, rgb(238, 218, 148), rgb(217, 179, 91));
}
</style>

複製代碼

頁面效果以下：前端

由於僞元素是絕對定位，因此擋在了文字的前面，因此應該改變僞元素的層疊順序，給僞元素添加樣式：z-index:-1,即：

.title::before {
    content: '';
    ...
    z-index:-1;
}
複製代碼

再次查看頁面效果：web

咦，下劃線呢？木了，同窗，你看到個人下劃線了嗎？接下來，咱們一塊兒把消失的下劃線揪出來吧。

層疊上下文

層疊上下文，英文稱做 stacking context，是 HTML 中的一個三維的概念。若是一個元素含有層疊上下文，咱們能夠理解爲這個元素在 z 軸上就「高人一等」。咱們能夠把層疊上下文理解爲一種「層疊結界」，自成一個小世界。在這個層疊結界中，全部的層疊元素都不會溢出這個結界，並在其內部知足必定的層疊規則：瀏覽器

background/border 爲裝飾屬性，浮動和塊狀元素通常用做佈局，而內聯元素都是內容。這裏須要注意的是，負 z-index 的元素在層疊順序上是高於 background 的，即便將一個元素的 z-index 設置爲-99999，它仍然會出如今所處的層疊上下文的背景之上。

層疊上下文的特性

層疊上下文的層疊水平要比普通元素高
 層疊上下文能夠阻斷元素的混合模式
 層疊上下文能夠嵌套，內部層疊上下文及其全部子元素均受制於外部的「層疊上下文」。
 每一個層疊上下文和兄弟元素獨立，也就是說，當進行層疊變化或渲染的時候，只須要考慮後代元素。
 每一個層疊上下文是自成體系的，當元素髮生層疊的時候，整個元素被認爲是在父層疊上下文的層疊順序中。
複製代碼

層疊上下文的建立

層疊上下文能夠由如下幾種方式建立：bash

頁面根元素天生具備層疊上下文，又稱爲根層疊上下文；
給元素設置 z-index 值爲數值的定位元素；
給元素設置特定的 CSS3 屬性，也會使其成爲層疊上下文；

根層疊上下文

根層疊上下文指的是頁面根元素，能夠當作是元素。所以，頁面中全部的元素一定處於至少一個「層疊結界」中。dom

z-index 爲數值的定位元素

對於 position 值爲 relative/absolute 以及 Firefox/IE 瀏覽器(不包括 Chrome 瀏覽器)下含有 position:fixed 聲明的定位元素，當其 z-index 值不是 auto 的時候，會建立層疊上下文。換言之，想讓 z-index 對元素的層疊順序生效，前提是該元素得是定位元素，不然根本都不會建立層疊上下文。佈局

CSS3 屬性建立的層疊上下文

元素爲 flex 佈局元素(父元素 display:flex|inline-flex)，同時 z-index 值不是 auto。
元素的 opacity 值不是 1。
元素的 transform 值不是 none。
元素 mix-blend-mode 值不是 normal。
元素的 filter 值不是 none。
元素的 isolation 值是 isolate。
元素的 will-change 屬性值爲上面 2~6 的任意一個(如 will-change:opacity、will-chang:transform 等)。
元素的-webkit-overflow-scrolling 設爲 touch。

層疊上下文與層疊順序

由於根層疊上下文的存在，全部全部頁面元素至少存在於一個層疊上下文中，並在其中知足一下規律：flex

若是層疊上下文元素不依賴 z-index 數值，則其層疊順序是 z-index:auto，可當作 z:index:0 級別；由 CSS3 屬性建立的層疊上下文屬於此類狀況；
若是層疊上下文元素依賴 z-index 數值，則其層疊順序由 z-index 值決定。

更完整的 7 階層疊順序圖：spa

消失的下劃線

最後，咱們一塊兒看看消失的下劃線去哪兒了，首先看一下頁面的 dom 元素層級 body->card->title->title:before,而此時，頁面中有兩個層疊上下文，根層疊上下文和僞元素經過 z-index:-1 建立的層疊上下文，由於僞元素 z-index 值是負值，查閱層疊順序圖，能夠知道僞元素會處於 body 的背景圖之上，card（塊狀水平盒子）之下。而 card 元素的背景設置爲純白色，因此下劃線僞元素就被 card 的白色背景擋住了，所以，咱們已經找到了消失的下劃線，那麼怎麼讓下劃線正好展現在文字和 title 元素的背景之間呢，那很簡單，只須要給 title 元素設置樣式：z-index:0,即給 title 元素建立層疊上下文，樣式代碼：

.title {
    position: relative;
    width: 100px;
    z-index:0;
}
複製代碼

此時頁面效果：

最後

本身試試？codePen

參考：css世界-張鑫旭

相關標籤/搜索

每日一句

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