CSS层叠上下文

1.不含z-index的层叠

一个根元素创建的层叠上下文中默认的层叠顺序：

2.增加z-index的层叠

如果需要改变默认的层叠顺序，那么在指定position属性（position属性取static外的其他值relative,absolute,fixed）的同时指定z-index的值就可以了。（注意！z-index只对指定了 position属性的元素有效。）
z-index是z轴上的整数数值，可以为负数，0层是默认层，可以为正数。数值越大离观察者越近。

• 当没有指定z-index的时候， 所有元素都会被渲染在默认层(0层)
• 当多个元素的z-index属性相同的时候(在同一个层里面)，那么将按照 不含z-index的层叠中描述的规则进行布局。

3.如何创建层叠上下文

• 根元素 (HTML)
• z-index不为auto的定位元素（position为relative,absolute，fixed）
• opacity 透明度值不为 1
• 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个有层级的层叠上下文。
• 每个层叠上下文完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
• 每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会 在父层叠上下文中 按顺序进行层叠。

4.示例

层叠上下文层级示意图：

层叠的元素在 Z 轴上的渲染顺序示意图：

最终显示（设置了透明度以便观看层叠顺序）：

实例：
不加z-index的默认情况下，导航菜单nav的二级菜单区域的背景会被下面的显示区域router-view中的行内元素（百度）所覆盖，这是因为它们都没有指定z-index，按不含z-index的顺序进行层叠，都渲染在0层。而router-view区域的HTML顺序是位于二级菜单的后面，因此就渲染在了块级元素二级菜单之上。

我们知道，菜单nav元素（蓝色区域）和下面显示区域router-view（灰色横线下面的部分）是兄弟元素，且它们位于同一个层叠上下文。因此我们要想让包含二级菜单的菜单整个位于router-view区域的上方，只要为菜单创建一个层叠上下文，并且让菜单在根元素的层叠上下文中位于router-view的上面就可以了。这里我们指定nav为一个z-index的值大于0的正整数，同时指定它的position属性为relative就可以了。

 nav {
    margin: 5px 40px;
    height: 50px;
    width: 100%;
    /*让二级菜单的层叠顺序位于下方显示区的上面*/
    position: relative;
    z-index: 1;
  }

GitHub:https://lucyzlu.github.io/ife-2017/index.html

5.参考

MDN层叠上下文