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 之上