z-index优先级比较的总结

说明
z-index属性在写页面的时候经常会遇到。但如果页面结构复杂且用到的z-index多我就会有点迷，下面是我的小结。

基本概念：
(1)z-index是深度属性，设置元素在z轴上面的堆叠顺序。
(2)只有dom设置了position:absolute | relative | fixed 才会有z-index属性
(3)堆叠上下文：当前dom往上级找，如果该级设置了z-index属性值(非auto)，那么该级别dom就是堆叠上下文；如果往上级一直找不到，那么根级别dom就是堆叠上下文。

z-index优先级别比较：
(1) 有postion属性的dom(脱离文档流的dom)会在没有position属性的dom(文档流内的dom)的上面。
(2) 文档流内容的堆叠遵循后来居上的原则。(后面的如果和前面的dom重叠了，后面盖在前面)
(3) 同级的dom，它们的堆叠上下文一定相同。所以直接z-index比较，大的在上面，小的在下面，相同的遵循后来居上的原则。
(4) 非同级的dom，先要看它们的堆叠上下文。如果堆叠上下文一致，那么比较同(3)；如果不一致，就比较他们堆叠上下文的z-index。(dom的z-index受父级的约束，父级如果小的话，子级再大也没用!)