z-index基本用法
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">ap>
<p class="c">cp>
div>
<div>
<p class="b">bp>
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>Documenttitle>
<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">ap>
<p class="c">cp>
div>
<div id="div2">
<p class="b">bp>
div>
body>
html>
a、b、c处于不同的层叠上下文中，所以根据父级的z-index大小来确定层级。如下图所示：
可发现 , 虽然 b 的 z-index 值最大 , 但由于其所在的盒子 div2 的 z-index 值小于 a, c 所在的盒子 div1 的 z-index 值,所以 a , c 在 b 之上