知識點1：z-index基礎

• ? z-index：auto; 默認值
• ? z-index: <integer> ?整數
• ? z-index: inherit 繼承
• ? 不考慮css3 ?還有定位元素的z-index才有作用

知識點2：z-index與定位元素

• ? 無嵌套：后來居上，哪個大哪個上

//在沒有添加z-index屬性時，如果兩個圖片有重疊，默認為圖片2覆蓋圖片1 “后來居上” //如果添加了z-index，則那個元素的z-index值大，那個在最上面 “哪個大哪個上” <img src="圖片1" style="position: relative; z-index: 2"> <img src="圖片2" style="position: absolute; z-index: 1">

• ? 有嵌套：祖先優先原則（z-index: 數字）

//雖然圖片1的z-index大于圖片2的z-index,但是對于嵌套的定位元素z-index遵循祖先優先原則，所以圖片2優先顯示 <div style="position: relative; z-index: 1"> //祖先元素的z-index不能為auto<img src="圖片1" style="position: relative; z-index: 2"> </div> <div style="position: relative; z-index: 1"> //祖先元素的z-index不能為auto<img src="圖片2" style="position: absolute; z-index: 1"> </div>

知識點3：層疊上下文（stacking-context）和層疊水平（stacking-level）（重要）

• ? 層疊上下文：

? ?? ?頁面根元素天生具有層疊上下文，稱之為“根層疊上下文”

? ? z-index值為數值的定位元素也具有層疊上下文

? ? 其他屬性

• ? 層疊水平：層疊上下文中的每一個元素都有一個層疊水平，決定了同一個層疊上下文中元素在z軸上的顯示順序
• ? 層疊水平和z-index不是一個東西，普通元素也有層疊水平。
• ? 層疊上下文的特性：

層疊上下文可以嵌套，組合成一個分層次的層疊上下文。

每個層疊上下文和兄弟元素獨立：當進行層疊變化或渲染的時候，只需要考慮后代元素。

每個層疊上下文是自成體系的：當元素的內容被層疊后，整個元素被認為是在父層的層疊順序中。

知識點4：層疊順序 （stacking-order）
? background --> 負z-index --> block塊狀水平盒子 --> float浮動盒子 --> inline/inline-block
? --> z-index:auto或z-index:0?--> 正z-index

知識點5：z-index與層疊上下文

• ? 定位元素默認z-index:auto可以看成z-index:0
• ? z-index不為auto的定位元素會創建層疊上下文
• ? z-index層疊順序的比較止步于父級層疊上下文

知識點6：其他css屬性與層疊上下文

• ?能創建層疊上下文的的css屬性

<div class="box"><div><img src="logo.jpg"></div> </div> <style>.box {display: flex; // 1.display: flex 與子元素z-index不為auto 配合使用background:blue}.box > div {z-index: 1}.box > div > img {position: relative; z-index: -1;} </style><div class="box"><img src="" alt=""> </div> <style>.box {background:blue;opacity: .5; // 2.opacity 不等于 1transform: rotate(15deg); // 3.transform 不等于 nonemix-blend-mode: screen; // 4.mix-blend-mode: screenfilter: blur(5px); // 5.filter 不等于 noneisolation: isolate; // 6.isolation: isolateposition: fixed; // 7.position: fixed Chrome等bink/webkit內核的瀏覽器使用will-change: transform; // 8.will-change: transform-webkit-overflow-scrolling: touch // 9.移動端}.box > div > img {position: relative; z-index: -1;} </style>

知識點7：z-index與其他css屬性層疊上下文

background --> 負z-index --> block塊狀水平盒子 --> float浮動盒子 --> inline/inline-block
? --> z-index:auto或z-index:0，不依賴z-index的層疊上下文 --> 正z-index

不支持z-index的層疊上下文元素的層疊順序均是z-index:auto級別；

依賴z-index值創建層疊上下文的情況：

position值為relative/absolute或fixed（部分瀏覽器）

display：flex/inline-flex容器的子flex項

知識點8：z-index相關實踐分享

• 最小化影響原則?

? 目的：避免z-index嵌套層疊關系混亂?
? 原因：
? ? 1. 元素的層疊關系主要由所在的層疊上下文決定?
? ? 2. IE7 中z-index為auto也會創建層疊上下文
? 做法：
? ? 1. 避免使用定位屬性
? ? 2. 定位屬性從大容器平級分離為私有小容器

• 不犯二準則?

? 目的：避免z-index混亂，出現一山又比一山高的樣式問題
? 原因：多個協作以及后期維護
? 做法：對于任何非浮層元素，避免設置z-index值，z-index值沒有任何道理需要超過2

• 組件層級計數器

? 目的：避免浮層組件因z-index被覆蓋的問題?
? 原因：
? ? 1. 總會遇到意想不到的高層及元素
? ? 2. 組件的覆蓋規則具有動態性
? 做法：組件層級計數器方法 （JS獲取最大z-index,再加1）

• 可訪問性隱藏：人肉眼不可見，但是輔助設備可以識別。

? z-index負值元素在層疊上下文的背景之上，其他元素之下

??

?

總結

以上是生活随笔為你收集整理的CSS3笔记之定位篇（二）z-index的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。