z-index 有什么作用？ 如何使用？

z-index 有什么作用？

可以解决元素的覆盖问题，决定那个元素在上方，哪一个在下方；
z-index的值可以是负数，也可以为0，也可以无群大，数值大的在上方；
z-index父元素设置的值权重比较大，当两个父元素相比的时候，父元素起决定作用，其中的子元素设置多大都没有用；

如何使用？

正常情况下：可以看到灰色覆盖了粉色元素

定位004.png

在box2加入z-index属性，并且设置为负数；显示为粉色在上，灰色在下；

定位005.png

在box1和box2中都添加z-index属性；显示为粉色在上，灰色在下；

定位006.png

设置三个box，给三个分别设置z-index属性；显示按照z-index属性的值最高的在上边，最低的在下边；

定位007.png