• 不支持z-index的层叠上下文元素的层叠顺序均是z-index: auto级别

Paste_Image.png

• 依赖z-index的层叠上下文元素的层叠顺序取决于z-index值
• position值为relative/absolute或fixed(部分浏览器）
• display:flex|inline-flex容器的子flex项 (但是该元素还是普通元素，并不是z-index的容器)

Paste_Image.png
Paste_Image.png

• 做动画的时候，如果用opacity来做动画， 会出现，动画完成之后， 文字才出现

Paste_Image.png
Paste_Image.png

z-index 原则

1. 最小化影响 （看relative 那一章， 专门创建一个div来做zindex容器）

2. 不犯二原则 （不是浮层元素，不要使用大于2 的z-index）
   首先要避免设置z-index。
   灵活运用 层叠顺序，后来居上， 层叠水平

3. 组件层级计数器
   用js获取当前最大的z-index值再加一

4. 可访问性隐藏
   用z-index 来隐藏元素。 人看不见，但是其他设备可以发现