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