在网站制作中，经常会用到引导蒙层，就是在某个局部位置高亮我们需要重点突出的内容，实现该效果有两个核心元素，一个是引导区域，也就是要重点突出的内容，另一个就是半透明的蒙层元素。
为了满足业务需求，会从不同角度，不同的方法来实现引导蒙层，今天上海君君营销给大家介绍一种最简单的，用z-index实现引导蒙层，具体思路如下：
新增一个div，设置为半透明区域，大小覆盖整个页面；
半透明蒙层区域z-index大于页面元素；
引导内容区域大于半透明蒙层区域z-index
页面元素都是有层级的，我们只需要把引导内容区域设置为最顶层的层级，在引导内容区域之下设置一个遮罩层，其他内容元素的z-index都地域这个遮罩层即可。下边给大家举一个例子：
修改一下z2样式：
.z2{
position:absolute;
left:50px;
top:50px;
width:50px;
height:50px;
background:black;
opacity:0.5;
z-index:2;
animation:z_index 2s linear infinite alternate;}
@keyframes z_index{
from{
left:50px;
top:50px;
width:50px;
height:50px;
}
to {
left:0px;
top:0px;
width:200px;
height:200px;
}}
只要在布局页面元素的时候，把需要做蒙层的元素确定好，配合js，动态的设置元素的z-index + opacity，就可以很好的做到页面的引导蒙层效果。
