参考链接

css布局-z-index元素的压盖顺序

关于 z-index，你可能一直存在误区

深入理解CSS中的层叠上下文和层叠顺序

z-index 压盖顺序

简单总结

1、默认压盖顺序

  • 有定位的元素压盖没有定位的元素。
  • 都有定位的元素，html结构在后面的压盖在前面的。

2、自定义压盖顺序

  • z-index 属性值是数字，没有单位（默认 auto）。
  • 定位的元素可以使用 z-index。浮动不能使用 z-index 属性。
  • 同一个层叠上下文中，z-index 越大则压盖顺序越靠上。
  • 如果 z-index 值相同，html结构在后面的压盖住在前面的。
  • 不同的层叠上下文中的子元素，则优先比较层叠上下文的压盖顺序。
    一般来说，就是两个有定位且 z-index 为数值的父元素，
    其中的子元素比较时，会优先比较父元素的 z-index 大小，
    此时，若父元素的 z-index 较小，那么子元素的 z-index 再大也无济于事。

层叠上下文的创建

  1. 页面根元素 <html> 天生具有层叠上下文，称之为“根层叠上下文”。
  2. 当定位元素的 z-index 值不是 auto （即为数值）的时候，会创建层叠上下文。
  3. 其他CSS3属性。(见补充)

层叠上下文元素的特性

  • 层叠上下文的层叠水平要比普通元素高；
  • 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
  • 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
  • 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

层叠上下文的比较

普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。

下面这两个是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：

  1. 谁大谁上：当具有明显的层叠水平标示的时候，如识别的 z-index 值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
  2. 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

需要注意的是，千万不要把层叠水平和CSS的z-index属性混为一谈。
没错，某些情况下 **z-index** 确实可以影响层叠水平，但是，只限于定位元素以及 flex 盒子的孩子元素；
而层叠水平所有的元素都存在。

层叠上下文的层叠水平

CSS z-index压盖顺序 - 图1

  1. 背景和边框 ：形成层叠上下文的元素的背景和边框，它是整个上下文中层叠等级最低的。
  2. **z-index** 为负数 ：设置了 z-index 为负数的子元素以及由它所产生的层叠上下文
  3. 块级盒模型：位于正常文档流中的、块级的、非定位的子元素
  4. 浮动盒模型 ：浮动的、非定位的子元素
  5. 内联盒模型 ：位于正常文档流中的、内联的、非定位的子元素
  6. **z-index** 为 0：设置了 z-index 为 0 的、定位的子元素以及由它所产生的层叠上下文
  7. **z-Index** 为正数 ：设置了 z-index 为正数的、定位的子元素以及由它所产生的层叠上下文，它是整个上下文中层叠等级最高的

补充

一旦普通元素具有了层叠上下文，其层叠顺序就会变高，具体位置需要分两种情况讨论

  1. 如果层叠上下文元素不依赖 z-index 数值，则其层叠顺序是 z-index:auto 可看成 z:index:0 级别；
  2. 如果层叠上下文元素依赖 z-index 数值，则其层叠顺序由 z-index 值决定。

CSS3与新时代的层叠上下文

(参考链接3有更详细的展开)

  1. z-index 值不为 auto 的 flex 项(父元素 display:flex|inline-flex).
  2. 元素的 opacity 值不是 1.
  3. 元素的 transform 值不是 none.
  4. 元素 mix-blend-mode 值不是 normal.
  5. 元素的 filter 值不是 none.
  6. 元素的 isolation 值是 isolate.
  7. will-change 指定的属性值为上面任意一个。
  8. 元素的 -webkit-overflow-scrolling 设为 touch.