z-index
定义：一个元素在文档中的层叠顺序，用于确认元素在当前层叠上下文中的层叠级别。
语法 : z-index:数值(数值愈大,层叠级别越高)
每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定.
1、同一层叠上下文
层叠级别大的显示在上面，级别小的显示在下面；
层叠级别中的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
例： 有两个div盒子，a、c在一个盒子里，b在另一个盒子里，来考虑其z-index是不是正常效果。
div未设置z-index，在高级浏览器下不会产生新的局部层叠上下文，也就是说它们的子元素没有被新的局部层叠上下文包裹，那么它们的子元素就处在同一个层叠上下文中，可以直接通过自身的层叠级别来决定显示顺序。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> div { position: relative; width: 100px; height: 100px; } p { position: absolute; font-size: 20px; width: 100px; height: 100px; } .a { background-color: pink; z-index: 1; } .c { background-color: green; z-index: 2; top: 20px; left: 20px; } .b { background-color: red; z-index: 3; top: -20px; left: 40px; } </style> </head> <body> <div> <p class="a">a</p> <p class="c">c</p> </div> <div> <p class="b">b</p> </div> </body> </html>
a、b、c处于一个层叠上下文中，所以根据z-index大小来确定层级。如下图所示：
2、不同层叠上下文
元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
例: 有两个div盒子，a、c在一个盒子里，b在另一个盒子里
div设置z-index，那么div中的子元素以父元素的层叠关系为主。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> div { width: 100px; height: 100px; position: relative; } p { position: absolute; font-size: 20px; width: 100px; height: 100px; } #div1 {z-index: 2;} #div2{z-index: 1;} .a {background-color: pink;} .c { background-color: red; top: 20px; left: 20px; } .b { background-color: blue; top: -30px; left: 30px; z-index: 10; } </style> <body> <div id="div1"> <p class="a">a</p> <p class="c">c</p> </div> <div id="div2"> <p class="b">b</p> </div> </body> </html>
a、b、c处于不同的层叠上下文中，所以根据父级的z-index大小来确定层级。如下图所示：
可发现 , 虽然 b 的 z-index 值最大 , 但由于其所在的盒子 div2 的 z-index 值小于 a, c 所在的盒子 div1 的 z-index 值,所以 a , c 在 b 之上