- 如果不考虑css3，只有定位元素的z-index才有作用。
- 如果定位元素z-index没有发生嵌套：1、后来居上的准则（dom流先后顺序）；2、哪个大，哪个上。
- 如果定位元素发生了嵌套，则为祖先优先原则。前提:z-index是数值，非auto
css2.1：（z-index:auto）当前层叠上下文的生成盒子层叠上下文是0.盒子（除非是根元素）不会创建新的层叠上下文。
Paste_Image.png
层叠上下文、层叠水平和层叠顺序的概念
- 层叠上下文（stacking context）：是HTML元素中的一个三维概念，表示元素在z轴上有了“可以高人一等”。
1、页面根元素天生具有层叠上下文，称之为“根元素层叠上下文”
2、z-index值为数值的定位元素也具有层叠上下文。
3、其他属性。。。。
Paste_Image.png
层叠上下文的特性：
1、可以嵌套，组合成一个分层次的层叠上下文。
2、每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素。
3、每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。层叠水平（stacking level）：层叠上下文中的每一个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠准则。
层叠水平和z-index不是一个东西，普通元素也有层叠水平。层叠顺序（stacking order）：元素发生层叠时候有着特定的垂直显示顺序。意义是规范元素重叠时候的呈现规则
Paste_Image.png
三个要点：
1、定位元素默认z-index:auto可以看成是z-index:0;
2、z-index不为auto的定位元素会创建层叠上下文；
3、z-index层叠顺序的比较止步于父级层叠上下文。非定位元素的层叠上下文
1、不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别
2、依赖z-index的层叠上下文元素的层叠顺序取决于z-index值经验：
1、对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2---不犯二准则。
2、采用组件层级计算器方式设置层级：通过js获得body下子元素的最大z-index值+1
