先上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
position:absolute;
}
.pa1{
100%;
height:100%;
background:rgba(0,0,0,0.4);
}
.pa1>div{
300px;
height:300px;
background:rgba(255,0,0,0.6);
z-index:3;
}
.pa2{
50px;
height:50px;
background:rgba(0,0,0,0.8);
z-index:2;
}
</style>
</head>
<body>
<div class="pa1">
<div>son2</div>
</div>
<div class="pa2" onclick="javascript:alert('123');">pa2</div>
</body>
</html>
问题来了，.pa2的层级为2，.pa1的层级没设置(auto)，.pa1子元素层级为3，
按着同级原则，.pa2应该是始终高于.pa1的层级，所以，.pa2始终在.pa1之上的(误区。。。)
划重点：没设置层级的定位元素，不会产生堆叠上下文。。。
因为不会产生堆叠上下午，所以.pa2和.pa1比较久没有意义，这里会直接和子元素.pa1>div比较。所以.pa2会被盖住。。
也证明了z-index=0(产生)和不设置z-index产生是不一样的。
而要想.pa2盖住前面,可以给.pa1设置z-index<=.pa2的z-index。
over...