引导图是为了方便用户快速的了解产品的新功能，比较好的开源项目有driverJS、introJS。了解实现思路能更好的扩展第三方应用，特别是对于这种DOM操作相关的库。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<style>
body {
position: relative;
padding: 0;
margin: 0;
}
.mask {
position: absolute;
top: 0;
height: 0;
background: rgba(0, 0 ,0 ,0.7);
600px;
height: 600px;
z-index: 1;
}
.pop {
80px;
height: 80px;
z-index: 2;
position: absolute;
background: #fff;
top: 0;
}
.my {
50px;
height: 50px;
background: yellow;
}
/* 添加一个class把元素透出来*/
.driver {
position: relative;
z-index: 3;
}
</style>
<div>
<div class="my driver">
haha
</div>
</div>
<!-- 一定要挂载到body下 -->
<div class="mask"></div>
<!-- 覆盖物 -->
<div class="pop"></div>
</body>
</html>
思路：这个简单的DMEO没有JS，my类是等待引导的元素，pop是一个高亮区，用于突出显示my，mask是遮罩层。在使用z-index时，有几点要注意：
- z-index要想生效，必须对元素使用定位（非static）
- 如果父级元素设置了z-index，那么无论子级z-index多大，都无法穿透父级
综合以上，mask设置绝对定位并且z-index最小，pop设置绝对定位z-index次之，高亮元素设置relative定位并且z-index最高，这样就可以突出显示引导元素，进而实现引导效果。
在实际开发中，元素的位置和大小都需要通过JS动态计算，并添加元素上