z-index

一. z-index使用前提和场景

在css2.1时代，z-index只有配合定位属性才能够起作用，如position: absolute position:relative position:fixed,当然在最新的position: sticky也起作用。

在css3时代，z-index还可以应用在过渡动画上，比如：

@keyframes zindex {
	0% { z-index: -1;}
	100% { z-index: 50; }
}

二. css 中的层叠上下文和层叠水平

2.1 层叠上下文

2.2 层叠水平

层叠水平的目的是规范元素重叠时候的呈现规则。
例如1：inline和inline-block元素是在float上面的，因为内容才是最重要的。

例如2：

三. z-index与层叠上下文

3.1 创建层叠上下文后，后来居上：

3.2 z-index:auto 的层叠顺序大于图片这个内联元素

添加了position：relative; 后，z-index:auto; 就生效了。

四. 其他css属性与层叠上下文

五. 非定位元素层叠上下文与z-index关系

文字闪动一下的原因分析：

六. 经验总结：

1. 对于非浮层元素(弹框等)，避免设置z-index值，z-index值没有任何道理需要超过2 —不犯二准则。
2. 可访问行性隐藏，不能被辅助设备(如屏幕阅读器)识别到，在现代浏览器中其实display: none也是可以的。