CSS中z-index属性叠加法则

在我们开发中，要想改变元素的层级，就要通过z-index属性
z-index 属性指定一个元素的堆叠顺序
属性值：

• auto 默认值 堆叠顺序与父元素相等
• 数字 可以为正数，也可以为负数

使用前提：
z-index只能在position属性值为relative或absolute或fixed的元素上有效，对于文档流、浮动无效

现在只是给了3个盒子开启定位，box3盖住了box2，box2盖住了box1，这里开启定位元素的层级是一样的，box3在最上面只是因为它在HTML结构最下面，你可以理解为后来者居上
接下来为box2和box3打开z-index，看看效果如何变化


我们可以看到box2盖住了3，因为此时box2的层级比3高了
这里需要注意一点就是，父元素的层级无论多高都不会盖住它的子元素

我们可以看到box3的层级尽管设为999，但box4还是在它的上面

z-index的叠加法则总结：
1.数值大的层级发生重叠时会显示在值小元素的上面
2.祖先元素的层级再高，也不会盖过后代元素（简单理解为：水涨船高）