这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
对于z-index几乎前端开发者都是不陌生的，都知道是层级的控制，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
准则
- 后来居上的准则，后面的覆盖前面的；
- z-index哪个大，哪个在上；
- 祖先优先原则 (父级设置的z-index,那么则以父级的z-index去和同级的DOM的z-index去比较)
- 父级不设置z-index，父级相邻的DOM设置z-index，子设置z-index，当子z-index>父级的兄弟的z-index，则层级越高；
第三点很重要，当父级a的index的值大于b的时候，那么b下面的子级的index大于a，也不会生效。
使用
（1）必须在定位元素（position:relative/absolute/fixed/sticky）上才有效
（2） 可以有负值
层叠顺序（以下层叠顺序按照由内向外排列，即z轴上的值越来越大，越靠近用户）
- 层叠上下文的background与border。
- 负z-index。
- block。
- float。
- inline、inline-block。
- z-index：auto/0。不依赖z-index的层叠上下文
- z-index的值为正整数。
浏览器支持
所有主流浏览器都支持 z-index 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
根据默认值规则, IE6 / IE7 和 W3C 浏览器上的元素存在 z-index 默认值的区别. 我们相信, 仅当 position 设为 relative, absolute 或者 fixed, 并且 z-index 赋整数值时, 节点被放置到层级树; 而 z-index 为默认值时, 只在 document 兄弟节点间比较层级. 在 W3C 浏览器中, A, B-1 和 C-1-1 的 z-index 均为 auto, 不参与层级比较.
而在 IE6 和 IE7 中, 因为 z-index 的默认值是 0, 所以也参与了层级比较.
假设:
设置图像的 z-index：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
