深入了解z-index层叠规则

* 什么是层叠规则
层叠规则就是指当网页中的元素发生发生层叠时的表现规则
* 什么是层叠规则
层叠规则就是指当网页中的元素发生发生层叠时的表现规则
* 怎么使用z-index属性
z-index属性只有和定位元素（position不能为static的元素）在一起的时候才能使用，也可以时正数也可以是负数，数值越大，层级越高，但是随着css3的出现，z-index不仅只对定位元素有效，flex盒子的元素也有效
* 什么是层叠水平
层叠水平决定了同一个层叠上下文中元素在z轴上的显示顺序，所有的元素都有层叠水平，包括层叠上下文元素，也包括普通元素
* 理解层叠顺序
1. 位于最下面的background/border特指层叠上下文元素的边框和背景，每一个层叠顺序规则仅适用于当前层叠上下文的小世界
2.inline水平盒子指的是包括inline/inline-block/inline-table元素得到层叠顺序，它们都是同等级的
3、从层叠水平上来看，实际上z-index：0和z-index：auto是一样的
* 层叠的准则
1.水大谁上，如生效的z-index属性值，在同一层叠上下文领域，层叠只越大的哪个会覆盖层叠值小的那个
2.后来居上，当元素的层叠水平一致、层叠顺序相同时，DOM流中处于后面的元素会覆盖前面的元素
* z-index负值深入了解
z-index负值元素层级是在层叠上下文元素上面的、block元素的下面，也就是z-index虽然名为负数层级，但依然无法突破当前层叠上下文所包裹的世界