关于z-index的知识点

1. z-index只有在position状态下才会生效
2. 当设置了position以后,元素会自动添加一个z-index:auto的属性,因此层叠优先级也会提高

不同的层叠上下文

1. A 元素想跟 B 或者 ChildB 元素比较，很高兴，它们属于相同层叠上下文(ChildB)下，根据层叠水平去判断就可以了
2. 如果 A 元素想跟 C 或者 ChildA 比较，那就去找它们共同的祖先层叠上下文(ParentB)，找到之后，就根据祖先层叠上下文下两个元素所在的局部层叠上下文比较层叠水平(这里就是 ChildA 和 ChildB 去比较)
3. 同理，如果 A 想跟 D 一决雌雄，那么就去找祖先层叠上下文(Root)，然后去比较 ParentA 和 ParentB 的层叠水平即可

虽然 childA 的 z-index: 9999 非常大，但是在跟 parentB 或者 childB 比较的时候，它没资格去比，只能让它的老大 parentA 去比较，parentA 跟 parentB 一比较，才发现：妈呀，原来你的 z-index 为 2 比我还大，失敬失敬，所以 childA 和 parentA 只好乖乖呆在 parentB 底下

如果我们将例子稍微改下，让 parentA 不再创建新的层叠上下文元素：

当 parentA 不再创建层叠上下文之后，childA 想跟 childB 比较，就不再受限于 parentA，而是直接跟 parentB 直接比较(因为 childA 和 parentB 在同一个层叠上下文)，显然 childA 在最上方，这也就是 childA 覆盖 parentB 的原因

最佳实践

1. 不犯二准则：对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2
2. 对于浮层元素，可以通过 JS 获取 body 下子元素的最大 z-index 值，然后在此基础上加 1 作为浮层元素的 z-index 值

• 对于非浮层元素，不要过多地去运用 z-index 去调整显示顺序，要灵活地去运用层叠水平和后来居上的准则去让元素获得正确的显示，如果是在要设置 z-index 去调整，不建议非浮层元素 z-index 数值超过 2，对于 DOM 元素，-1, 0, 1, 2 足够让元素有正确的显示顺序。

• 对于浮层元素，往往是第三方组件开发，当你无法确认你的浮层是否会百分百覆盖在 DOM 树上的时候，你可以去动态获取页面 body 元素下所有子元素 z-index 的最大值，在此基础加一作为浮层元素 z-index 值，用于保证该浮层元素能够显示在最上方。