CSS层叠上下文以及z-index

网页设计中多个元素重叠时，如何处理各个元素的层叠顺序？我们常常用z-index来控制元素层叠顺序，元素层叠显示的原理又是什么呢？

层叠上下文

什么是层叠上下文:

每个元素都具有三维的空间坐标，处理水平和垂直外，还有一个Ｚ轴坐标，通过改变Ｚ轴坐标，我们可以实现元素的层叠．而包含这一组堆叠层的元素就是层叠上下文．

如何创建层叠上下文：

1. 根元素会自动形成层叠上下文
2. z-index值为数值的定位元素也具有层叠上下文
3. css3中许多属性

部分能创建层叠上下文的css3属性

• 父元素display: flex|inline-flex
• opacity属性值小于1
• transform属性值不为none
• filter属性值不为normal
• isolation: isolate
• position: fixed

层叠上下文规则

1. 每一个元素都仅属于一个层叠上下文
2. 同一层叠上下文中，层叠级别大的显示在上，小的显示在下，若层叠级别相同，则根据在HTML中的顺序显示
3. 不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠顺序来决定

层叠水平

层叠上下文中的每一个元素都有一个层叠水平，层叠水平决定每一个元素在同一层叠上下文中的显示顺序

7阶层叠顺序

层叠上下文和层叠水平都是概念性的内容，而层叠顺序是确定元素在层上下文中显示的规则

注意：z-index: auto不会创建层叠上下文(根元素除外)，但表示当前层叠上下文中的层级为0.(IE6-7除外)

---

z-index

语法格式

z-index:auto | <integer> | inherit;

注：可支持负值，若不考虑css3，只有定位元素(设置为非static)的z-index才有作用