z-index小惑

先上代码

<!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{
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.4);
        }
        .pa1>div{
            width:300px;
            height:300px;
            background:rgba(255,0,0,0.6);
            z-index:3;
        }
        .pa2{
            width: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...

posted @ 2018-08-22 10:51  江湖丶丿新进程  阅读(173)  评论(0)    收藏  举报