《CSS世界》筆記五：CSS層疊規則及元素隱藏

godruoyi 發布于2019-08-29 16:21 / 1223人閱讀

摘要：元素層疊順序補充說明位于最下面的特指層疊上下文元素后面會詳解的邊框和背景色。界中可能有其他的層疊結界，而自身也可能處于其他層疊結界中。

上一篇：《CSS世界》筆記四：流的保護與破壞

寫在前面

《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內容，這里僅把后面章節相對重要的內容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁的一本書并不是小小幾篇博客能完全說清楚的。

這個也算是《CSS世界》讀書筆記系列博客的終結篇了，雖說是“二進宮”，收獲依然滿滿，畢竟好書每次讀都能讀出新東西。這里還是要吐槽幾句，前端崗位很多同學（肯定不包括帥氣的你啦！）都不太重視CSS，不就是布局嗎，記幾條屬性也就能夠實現一個網頁布局，但是正是這些同學，往往在做適配和頁面調整時抱怨不斷，或者在調整時幾乎就是重構，CSS代碼絲毫沒有健壯性可言，熟不知合理使用CSS屬性和健壯布局能為你省很多事，甚至能夠為你省去很多js代碼。這里似乎寫出了“CSS重要性”的論斷，哈哈！

一、CSS世界的層疊規則

聲明：CSS中并不只是z-index能夠決定元素的z軸順序。

1.1 元素層疊順序(stacking level)

補充說明：

位于最下面的 background/border 特指層疊上下文元素（后面會詳解）的邊框和背景色。每一個層疊順序規則僅適用于當前層疊上下文元素的小世界；

inline水平盒子指的是包括inline/inline-block/inline-table元素的“層疊順序”，它們都是同等級別的；

單純從層疊水平上看，實際上 z-index:0 和 z-index:auto 是可以看成是一樣的，實際上，兩者在層疊上下文領域有著根本性的差異

記憶要訣：

由于網頁是圖文展示為主，inline會高于標準流盒子和浮動盒子

元素一旦成為定位元素，其 z-index 就是默認的 auto，根據上面的層疊順序表，就會覆蓋 inline 或 block 或 float 元素

1.2 層疊上下文(stacking context)

層疊上下文是一個概念，跟“塊狀格式化上下文” (BFC)類似。然而，概念這個東西是比較虛、比較抽象的，要想輕松理解，我們需要將其具象化。

怎么個具象化法呢？我們可以把層疊上下文理解為一種“層疊結界”，自成一個小世界。界中可能有其他的“層疊結界”，而自身也可能處于其他“層疊結界”中。

如何創建層疊上下文

（1）天生派：頁面根元素天生具有層疊上下文，稱為根層疊上下文（html標簽）

（2）正統派：z-index 值為數值的定位元素的傳統“層疊上下文”

對于position值為relative/absolute以及Firefox/IE(不包括Chrome)下含有position:fixed聲明的定位元素，當其z-index值不是auto的時候，會創建層疊上下文

（3）擴招派：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

CSS3創建層疊上下文引證：

由于層疊問題引發的bug：

描述：有一個絕對定位的黑色半透明層覆蓋在圖片上。但是，一旦圖片開始走 fadeIn 淡出的 CSS3 動畫，文字就跑到圖片后面去了，因為文字一直是 100%透明的純白色，文字變淡是因為跑到圖片后面，而圖片半透明，文字穿透顯示而已

原因：fadeIn 動畫本質是 opacity 透明度的變化，“元素的opacity值不是1”時會創建層疊上下文，為1時為普通元素。導致層級發生變化時引發bug

1.3 層疊黃金準則（重點）

（1）誰大誰上：當具有明顯的層疊水平標識的時候，如生效的 z-index 屬性值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個

（2）后來居上：當元素的層疊水平一致、層疊順序相同的時候，在 DOM 流中處于后面的元素會覆蓋前面的元素

下面有兩個案例，請問兩種情況的層疊順序：

答案：（1）1在上2在下；（2）1在下2在上

分析：z-index: auto所在的

元素是一個普通定位元素，于是，里面的兩個元素的層疊比較就不受父級的影響，兩者直接套用“誰大誰上”的準則;而z-index一旦變成數值，哪怕是 0，就會創建一個層疊上下文。此時遵循“層疊黃金準則”的另外一個準則“后來居上”，根據在DOM文檔流中的位置決定誰在上面

思考：在不居中層級錯亂時，可以找找父級元素的層級與目標元素(或父級)層級比較

1.4 zIndex可以為負值

對照著上面的層疊順序圖，我們可以知道zIndex為負值時是介于背景和普通流盒子之間的，直接看一個例子，請問下面的層疊情況

/* 情況一 */

    son


/* 情況二 */

    son


.father {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 255, .7);
}
.son {
    position: relative;
    z-index: -1;
    width: 200px;
    height: 100px;
    background-color: rgba(255, 0, 0, .7);
}

.transform {
    margin-top: 20px;
    transform: scale(1);
}

分析：

情況一：當.father是普通元素時，.son元素所在的層疊上下文元素一是.father的某個祖先元素；.son是 z-index 負值元素，.father是 block 元素，也就是.son應該在.father元素的后面顯示，因此，.son會被.father元素的藍色背景覆蓋；

情況二：當.father是層疊上下文元素時，z-index 負值元素在層疊上下文元素的背景上，因此，.son在.father元素的藍色背景上；

二、元素隱藏 2.1 元素各種隱藏方法

（1）如果希望元素不可見，同時不占據空間，輔助設備無法訪問，但資源有加載，DOM 可訪問，則可以直接使用 display:none 隱藏

.dn { display: none; }

（2）如果希望元素不可見，同時不占據空間，輔助設備無法訪問，但顯隱的時候可以有transition 淡入淡出效果

.hidden {
    position: absolute;
    visibility: hidden;
}

（3）如果希望元素不可見，不能點擊，輔助設備無法訪問，但占據空間保留，則可以使用 visibility:hidden 隱藏

.vh { visibility: hidden; }

（4）如果希望元素不可見，不能點擊，不占據空間，但鍵盤可訪問，則可以使用 clip 剪裁隱藏

.clip {
    position: absolute;
    clip: rect(0 0 0 0);
}

（5）如果希望元素不可見，不能點擊，但占據空間，且鍵盤可訪問，則可以試試 relative 隱藏。例如，如果條件允許，也就是和層疊上下文之間存在設置了背景色的父元素，則也可以使用更友好的 z-index 負值隱藏

.lower {
    position: relative;
    z-index: -1;
}

（6）如果希望元素不可見，但可以點擊，而且不占據空間，則可以使用透明度

.opacity {
    position: absolute;
    opacity: 0;
    filter: Alpha(opacity=0);
}

（7）如果單純希望元素看不見，但位置保留，依然可以點可以選，則直接讓透明度為 0

.opacity {
    opacity: 0;
    filter: Alpha(opacity=0);
}

2.2 display與visiblity隱藏比較

空間占據：

display:none 隱藏后的元素不占據任何空間

visibility:hidden 隱藏的元素空間依舊存在

后代隱藏原理：

display屬性值為none時，該元素以及所有后代元素都隱藏

visibility屬性值hidden時，子元素也會看不見，因為子元素繼承了visibility:hidden

因此，當子元素設置visibility:visible;時，子元素又會顯現


    列表1
    列表 2
    列表 3
    列表4

最終列表1和列表4依然會顯示

三、總結

CSS層疊上下文理解和創建

CSS層疊順序和規則

元素隱藏的各種方式及對比

上一篇：《CSS世界》筆記四：流的保護與破壞

云服務器 GPU云服務器 css元素 html css隱藏隱藏元素 css引入css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113690.html

《CSS世界》筆記四：流的保護與破壞

摘要：和可以看作是同父異母的兄弟關系。例子如下結果如下而父元素設置屬性的方式則是利用了的特性下面將會詳細講解結界全稱為，中文為塊級格式化上下文。上一篇：《CSS世界》筆記三：內聯元素與對齊下一篇：《CSS世界》筆記五：CSS層疊規則及元素隱藏寫在前面原本博客名為浮動與定位，但是《CSS世界》第六章節的內容不僅有浮動定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將...

he_xd 2019-08-29 16:20 評論0 收藏0
《css世界》- 詳細重點筆記與技巧

摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。概述在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

MasonEast 2019-08-02 12:03 評論0 收藏0
《css世界》- 詳細重點筆記與技巧

摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。概述在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

趙連江 2019-08-29 17:20 評論0 收藏0
CSS世界（文檔）

摘要：整理完了高性能這本書，往下就需要快速處理世界，這本講解特性的書非常值得一讀，內容完整，重點突出，實戰性強，就是語言啰嗦。由于全書內容太多，而且需要一點一點的整理，所以放到了站點上，方便大家查看。整理完了《高性能JavaScript》這本書，往下就需要快速處理《CSS世界》，這本講解CSS特性的書非常值得一讀，內容完整，重點突出，實戰性強，就是語言啰嗦。由于全書內容太多，而且需要一點一...

CNZPH 2019-08-30 15:54 評論0 收藏0