层叠上下文:是HTML元素的一个三维概念,表示元素在Z轴上有了“可以高人一等”
页面根元素html天生具有层叠上下文,称之为“跟层叠上下文”;
z-index值为数值的定位元素也具有层叠上下文;
层叠水平:层叠上下文中的每个元素都有一个层叠水平,决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠准则;
每个元素都有层叠水平,但z-index只有在定位元素中才起作用。层叠水平和z-index不是一个东西;
层叠上下文的特性:
1.层叠上下文可以嵌套,组合成一个分层次的层叠上下文。
2.每个层叠上下文和兄弟元素独立,当进行层叠变换或渲染的时候,只需要考虑后代元素;
3.每个层叠上下文是自成体系的:当元素的内容被层叠后,整个元素被认为是在父层的层叠顺序中。
层叠顺序:元素发生层叠时候有着特定的垂直显示顺序
1.定位元素默认z-index:auto可以看成是z-index:0;
2.z-index不为auto的定位元素创建层叠上下文;
3.z-index层叠顺序的比较止步于父级层叠上下文;
z-index:auto;不会创建层叠上下文;
z-index:0;会创建层叠上下文;
IE7bug:z-index:auto;也会创建层叠上下文;
z-index受限于层叠上下文;
例子1:子元素z-index值不为auto的flex项(父元素display:flex|inline-flex)
例子2:透明度不为1的,也将创建层叠上下文
例子3:元素transform值不为none,将创建层叠上下文
例子:5:css3中滤镜:filter不为none; chrome不行,火狐可以;
例子6:isolation值为isolate;
例子7:position值为fixed;不过只在chrome等blink/webkit内核浏览器