css之z-index深度解析

（幾個重點概念解析）

一、層疊上下文

1. 層疊上下文：如果一個元素擁有層疊上下文。那么就代表這個元素在頁面的z軸上是有定位的。
2. 什么元素擁有 層疊上下文：a.根元素、b.z-index值為數值的元素、c.其他屬性。
3. 層疊上下文的特性：a.層疊上下文可以嵌套、b.層疊上下文與兄弟元素獨立，僅后代元素受影響、c.層疊上下文的后代層疊水平不影響其他。

二、層疊水平

1. 什么元素擁有層疊水平：所有元素都有層疊水平。層疊上下文中的每一個元素都有層疊水平。
2. 層疊水平的基礎排列規則（不具備其他特殊屬性時）：a.后來居上、b.誰大誰上（z-index值得大小）

三、層疊順序（以下層疊順序按照由內向外排列，即z軸上的值越來越大，越靠近用戶）

1. 層疊上下文的background與border。
2. 負z-index。
3. block。
4. float。
5. inline、inline-block。
6. z-index：auto/0。不依賴z-index的層疊上下文
7. z-index的值為正整數。

四、z-index

1. 什么元素可以應用z-index屬性：定位的元素（relative、absolute、fixed、sticky）
2. 應用z-index屬性的元素如何層疊：1.當定位元素平級、無嵌套時：a.后來居上、b.誰大誰上。2.有嵌套：以祖先為准
3. 特殊性：z-index值為auto的定位元素不會創建新的層疊上下文（除非是根元素，根元素天生具有層疊上下文）。只有當z-index值為數值時，才會創建。

五、我的理解：

　　頁面中元素的層疊情況是由層疊順序這個規則決定的。在最初的頁面里，所有元素按照默認的情況依次排列。而z-index屬性像是一個外來戶，打破最初的默認情況，但是層疊規則依舊不變。新的層疊層級仍然要按照舊的層疊規則進行排列。

六、感謝：

　　本博客內容來自於對張鑫旭大神博客的學習與慕課網張鑫旭大神對於z-index的講解的理解。

　　張鑫旭大神博文地址為：http://www.zhangxinxu.com/wordpress/?p=5115