z-index 详解

z-index深入解析

层叠顺序

  1. 常规流中非定位非行内的元素根据html顺序,按照“后来居上”的规则层叠。
  2. 层叠顺序如下(高➡低):
    • z-index为auto的定位元素;
    • 常规流内行内非定位元素;
    • 非定位的浮动元素;
    • 常规流内非行内非定位元素;
    • z-index为负的定位元素。
  3. 定位元素的z-index为auto,根据html顺序,按照“后来居上”的规则层叠。
  4. 定位元素的层叠级别由z-index的值决定,z-index为auto则其层叠级别为0(注意:只是层级为0,其z-index值仍为auto);
    同一层叠上下文中,层叠级别大的元素位于层叠级别小的元素之上;
    同一层叠上下文中,层叠级别相同的元素根据html顺序决定元素的层叠关系,遵循“后来居上”原则。

层叠顺序总结

z-index

层叠上下文

CSS2中规定创建层叠上下文的两种情况:

  1. 根元素(html)
  2. 定位元素(absolute/relative)且z-index的值不为auto。

    注:在同一层叠上下文中,父元素、子元素与自身都被当作是并级关系进行层叠级别的比较。他们之间可能互相层叠。

  • ie6-7中,z-index为auto的定位元素也会创建新的层叠上下文。

CSS3中规定创建层叠上下文的十种情况:

  1. 根元素 (HTML)
  2. 绝对(absolute)定位或相对(relative)定位且 z-index 值不为”auto”
  3. 一个 flex 项目(flex item),且 z-index 值不为 “auto”,也就是父元素 display: flex(inline-flex)
  4. 元素的 opacity 属性值小于 1
  5. 元素的 transform 属性值不为 “none”
  6. 元素的 mix-blend-mode 属性值不为 “normal”
  7. 元素的 isolation 属性被设置为 “isolate”
  8. 在 mobile WebKit 和 Chrome 22+ 内核的浏览器中,position: fixed 总是创建一个新的层叠上下文, 即使 z-index 的值是 “auto”
  9. 在 will-change 中指定了任意 CSS 属性,即便你没有定义该元素的这些属性
  10. 元素的 -webkit-overflow-scrolling 属性被设置 “touch”

层叠上下文总结

  1. 根元素(html)会创建一个新的层叠上下文;
  2. 上述CSS2/CSS3中的元素会创建新的层叠上下文;
  3. 在每一个层叠上下文中都遵循上文中提到的层叠顺序;
  4. 每一个层叠上下文(除根元素)在它的父层叠上下文中都以一个普通元素来对待,其内部的层叠规则不影响其本身在父层叠上下文(即其所属层叠上下文)中的层叠顺序。

总结

  1. 同一层叠上下文的元素(无论它们在结构上是兄弟或父子,甚至是祖孙),都遵循上文所述的层叠顺序;
  2. 不同的层叠上下文之间,层叠上下文级别越大的元素及其内部元素都将位于层叠上下文元素相比较小的元素及其内部元素之上;此时,将无视内部子元素的z-index大小。
  3. 不同的层叠上下文之间互相独立;
    层叠上下文可嵌套,内部规则不影响外部。
  4. 比较优先:层叠上下文 > stack level > z-index

    注:opacity所创建的层叠上下文级别将小于根(html)的层叠上下文。