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