同等级别间的层叠顺序
排序
层叠上下文: (background/border) < 负z-index < block块状水平盒子 < float浮动盒子 < z-index:auto或z-index:0(新的层叠上下文) < 正 z-index
准则
覆盖关系遵循下面两条准则:
- 谁大谁上:当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
- 后来居上:当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。
层叠上下文
css的世界里元素的重叠并不是按照DOM树的层级来判断的, 而是在层叠上下文之间判断的
什么时候会产生层叠上下文?
- 根层叠上下文
- position 值为 relative/absolute 以及 Firefox/IE 浏览器(不包括 Chrome 浏览 器)下含有 position:fixed 声明的定位元素，当其 z-index 值不是 auto 的时候，会创建 层叠上下文。
- 关于css3
- 元素为 flex 布局元素(父元素 display:flex|inline-flex)，同时 z-index值不是 auto。
- 元素的 opacity 值不是 1。
- 元素的 transform 值不是 none。
- 元素 mix-blend-mode 值不是 normal。(元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。)
- 元素的 filter 值不是 none。(滤镜)
- 元素的 isolation 值是 isolate。
- 元素的 will-change 属性值为上面 2~6 的任意一个(如 will-change:opacity、will-chang:transform 等)。
- 元素的-webkit-overflow-scrolling 设为 touch。
层叠上下文元素有如下特性。
- 层叠上下文的层叠水平要比普通元素高
- 层叠上下文可以阻断元素的混合模式
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”
- 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中