資訊專欄INFORMATION COLUMN
摘要：元素層疊順序補(bǔ)充說明位于最下面的特指層疊上下文元素后面會(huì)詳解的邊框和背景色。界中可能有其他的層疊結(jié)界，而自身也可能處于其他層疊結(jié)界中。
上一篇：《CSS世界》筆記四：流的保護(hù)與破壞
寫在前面《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內(nèi)容，這里僅把后面章節(jié)相對(duì)重要的內(nèi)容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁的一本書并不是小小幾篇博客能完全說清楚的。
這個(gè)也算是《CSS世界》讀書筆記系列博客的終結(jié)篇了，雖說是“二進(jìn)宮”，收獲依然滿滿，畢竟好書每次讀都能讀出新東西。這里還是要吐槽幾句，前端崗位很多同學(xué)（肯定不包括帥氣的你啦?。┒疾惶匾旵SS，不就是布局嗎，記幾條屬性也就能夠?qū)崿F(xiàn)一個(gè)網(wǎng)頁布局，但是正是這些同學(xué)，往往在做適配和頁面調(diào)整時(shí)抱怨不斷，或者在調(diào)整時(shí)幾乎就是重構(gòu)，CSS代碼絲毫沒有健壯性可言，熟不知合理使用CSS屬性和健壯布局能為你省很多事，甚至能夠?yàn)槟闶∪ズ芏鄇s代碼。這里似乎寫出了“CSS重要性”的論斷，哈哈！
一、CSS世界的層疊規(guī)則聲明：CSS中并不只是z-index能夠決定元素的z軸順序。
1.1 元素層疊順序(stacking level)補(bǔ)充說明：
位于最下面的 background/border 特指層疊上下文元素（后面會(huì)詳解）的邊框和背景色。每一個(gè)層疊順序規(guī)則僅適用于當(dāng)前層疊上下文元素的小世界；
inline水平盒子指的是包括inline/inline-block/inline-table元素的“層 疊順序”，它們都是同等級(jí)別的；
單純從層疊水平上看，實(shí)際上 z-index:0 和 z-index:auto 是可以看成是一樣的，實(shí)際上，兩者在層疊上下文領(lǐng)域有著根本性的差異
記憶要訣：
由于網(wǎng)頁是圖文展示為主，inline會(huì)高于標(biāo)準(zhǔn)流盒子和浮動(dòng)盒子
元素一旦成為定位元素，其 z-index 就是默認(rèn)的 auto，根據(jù)上面的層疊順序表，就會(huì)覆蓋 inline 或 block 或 float 元素
1.2 層疊上下文(stacking context)層疊上下文是一個(gè)概念，跟“塊狀格式化上下文” (BFC)類似。然而，概念這個(gè)東西是比較虛、比較抽象的，要想輕松理解，我們需要將其具象化。怎么個(gè)具象化法呢？我們可以把層疊上下文理解為一種“層疊結(jié)界”，自成一個(gè)小世界。界中可能有其他的“層疊結(jié)界”，而自身也可能處于其他“層疊結(jié)界”中。
如何創(chuàng)建層疊上下文
（1）天生派：頁面根元素天生具有層疊上下文，稱為根層疊上下文（html標(biāo)簽）
（2）正統(tǒng)派：z-index 值為數(shù)值的定位元素的傳統(tǒng)“層疊上下文”
對(duì)于position值為relative/absolute以及Firefox/IE(不包括Chrome)下含有position:fixed聲明的定位元素，當(dāng)其z-index值不是auto的時(shí)候，會(huì)創(chuàng)建層疊上下文
（3）擴(kuò)招派：CSS3屬性創(chuàng)建
元素為flex布局元素(父元素display:flex | inline-flex)，同時(shí)z-index值不是auto
元素的opacity值不是1
元素的transform值不是none
元素mix-blend-mode值不是normal
元素的filter值不是none
元素的isolation值是isolate
元素的will-change屬性值為上面2~6的任意一個(gè)(如will-change: opacity、will-chang:transform等)
元素的-webkit-overflow-scrolling設(shè)為touch
CSS3創(chuàng)建層疊上下文引證：
由于層疊問題引發(fā)的bug：
描述：有一個(gè)絕對(duì)定位的黑色半透明層覆蓋在圖片上。但是，一旦圖片開始走 fadeIn 淡出的 CSS3 動(dòng)畫，文字就跑到圖片后面去了，因?yàn)槲淖忠恢笔?100%透明的純白色，文字變淡是因?yàn)榕艿綀D片后面，而圖片半透明，文字穿透顯示而已
原因：fadeIn 動(dòng)畫本質(zhì)是 opacity 透明度的變化，“元素的opacity值不是1”時(shí)會(huì)創(chuàng)建層疊上下文，為1時(shí)為普通元素。導(dǎo)致層級(jí)發(fā)生變化時(shí)引發(fā)bug
1.3 層疊黃金準(zhǔn)則（重點(diǎn)）（1）誰大誰上：當(dāng)具有明顯的層疊水平標(biāo)識(shí)的時(shí)候，如生效的 z-index 屬性值，在同一個(gè)層疊上下文領(lǐng)域，層疊水平值大的那一個(gè)覆蓋小的那一個(gè)
（2）后來居上：當(dāng)元素的層疊水平一致、層疊順序相同的時(shí)候，在 DOM 流中處于后面的元素會(huì)覆蓋前面的元素
下面有兩個(gè)案例，請(qǐng)問兩種情況的層疊順序：
答案：（1）1在上2在下；（2）1在下2在上
分析：z-index: auto所在的 思考：在不居中層級(jí)錯(cuò)亂時(shí)，可以找找父級(jí)元素的層級(jí)與目標(biāo)元素(或父級(jí))層級(jí)比較 對(duì)照著上面的層疊順序圖，我們可以知道zIndex為負(fù)值時(shí)是介于背景和普通流盒子之間的，直接看一個(gè)例子，請(qǐng)問下面的層疊情況 分析： 情況一：當(dāng).father是普通元素時(shí)，.son元素所在的層疊上下文元素一是.father的某個(gè)祖先元素；.son是 z-index 負(fù)值元素，.father是 block 元素，也就是.son應(yīng)該在.father元素的后面顯示，因此，.son會(huì)被.father元素的藍(lán)色背景覆蓋； 情況二：當(dāng).father是層疊上下文元素時(shí)，z-index 負(fù)值元素在層疊上下文元素的背景上，因此，.son在.father元素的藍(lán)色背景上； （1）如果希望元素不可見，同時(shí)不占據(jù)空間，輔助設(shè)備無法訪問，但資源有加載，DOM 可訪問，則可以直接使用 display:none 隱藏 （2）如果希望元素不可見，同時(shí)不占據(jù)空間，輔助設(shè)備無法訪問，但顯隱的時(shí)候可以有transition 淡入淡出效果 （3）如果希望元素不可見，不能點(diǎn)擊，輔助設(shè)備無法訪問，但占據(jù)空間保留，則可以使用 visibility:hidden 隱藏 （4）如果希望元素不可見，不能點(diǎn)擊，不占據(jù)空間，但鍵盤可訪問，則可以使用 clip 剪裁隱藏 （5）如果希望元素不可見，不能點(diǎn)擊，但占據(jù)空間，且鍵盤可訪問，則可以試試 relative 隱藏。例如，如果條件允許，也就是和層疊上下文之間存在設(shè)置了背景色的父元素， 則也可以使用更友好的 z-index 負(fù)值隱藏 （6）如果希望元素不可見，但可以點(diǎn)擊，而且不占據(jù)空間，則可以使用透明度 （7）如果單純希望元素看不見，但位置保留，依然可以點(diǎn)可以選，則直接讓透明度為 0 空間占據(jù)： display:none 隱藏后的元素不占據(jù)任何空間 visibility:hidden 隱藏的元素空間依舊存在 后代隱藏原理： display屬性值為none時(shí)，該元素以及所有后代元素都隱藏 visibility屬性值hidden時(shí)，子元素也會(huì)看不見，因?yàn)樽釉乩^承了visibility:hidden 因此，當(dāng)子元素設(shè)置visibility:visible;時(shí)，子元素又會(huì)顯現(xiàn) 最終列表1和列表4依然會(huì)顯示 CSS層疊上下文理解和創(chuàng)建 CSS層疊順序和規(guī)則 元素隱藏的各種方式及對(duì)比 上一篇：《CSS世界》筆記四：流的保護(hù)與破壞 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113690.html元素是一個(gè)普通定位元素，于是，里面的兩個(gè)
元素的層疊比較就不受父級(jí)的影響，兩者直接套用“誰大誰上”的準(zhǔn)則;而z-index一旦變成數(shù)值，哪怕是 0，就會(huì)創(chuàng)建一個(gè)層疊上下文。此時(shí)遵循“層疊黃金準(zhǔn)則”的另外一個(gè)準(zhǔn)則“后來居上”，根據(jù)在DOM文檔流中的位置決定誰在上面
/* 情況一 */
/* 情況二 */
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);
}son
.dn { display: none; }
.hidden {
position: absolute;
visibility: hidden;
}
.vh { visibility: hidden; }
.clip {
position: absolute;
clip: rect(0 0 0 0);
}
.lower {
position: relative;
z-index: -1;
}
.opacity {
position: absolute;
opacity: 0;
filter: Alpha(opacity=0);
}
.opacity {
opacity: 0;
filter: Alpha(opacity=0);
}
2.2 display與visiblity隱藏比較
摘要：和可以看作是同父異母的兄弟關(guān)系。例子如下結(jié)果如下而父元素設(shè)置屬性的方式則是利用了的特性下面將會(huì)詳細(xì)講解結(jié)界全稱為，中文為塊級(jí)格式化上下文。 上一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對(duì)齊下一篇：《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏 寫在前面 原本博客名為浮動(dòng)與定位，但是《CSS世界》第六章節(jié)的內(nèi)容不僅有浮動(dòng)定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將...
摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點(diǎn)長，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點(diǎn)長，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲！??！以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標(biāo)與文字居中問題等; ps: 特別是 line-h...
摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點(diǎn)長，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點(diǎn)長，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲！?。∫韵率钦悦空聝?nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標(biāo)與文字居中問題等; ps: 特別是 line-h...
摘要：整理完了高性能這本書，往下就需要快速處理世界，這本講解特性的書非常值得一讀，內(nèi)容完整，重點(diǎn)突出，實(shí)戰(zhàn)性強(qiáng)，就是語言啰嗦。由于全書內(nèi)容太多，而且需要一點(diǎn)一點(diǎn)的整理，所以放到了站點(diǎn)上，方便大家查看。 整理完了《高性能JavaScript》這本書，往下就需要快速處理《CSS世界》，這本講解CSS特性的書非常值得一讀，內(nèi)容完整，重點(diǎn)突出，實(shí)戰(zhàn)性強(qiáng)，就是語言啰嗦。由于全書內(nèi)容太多，而且需要一點(diǎn)一...
閱讀 3507·2023-04-26 01:45
閱讀 2296·2021-11-23 09:51
閱讀 3722·2021-10-18 13:29
閱讀 3534·2021-09-07 10:12
閱讀 758·2021-08-27 16:24
閱讀 1873·2019-08-30 15:44
閱讀 2242·2019-08-30 15:43
閱讀 3049·2019-08-30 13:11
