CSS面试-层叠上下文(z-index)

156 阅读1分钟

developer.mozilla.org/zh-CN/docs/…

误区

什么是层叠上下文(stacking contex)

MDN:

什么是层叠等级(stacking level)

层叠等级的比较

如何产生层叠上下文

CSS3中的属性对层叠上下文的影响

什么是层叠顺序(stacking order)

表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。

由此可见,前面所说的“层叠上下文”和“层叠等级”是一种概念,而这里的“层叠顺序”是一种规则。

如何判断两个元素的层叠关系

  • 首先先看要比较的两个元素是否处于同一个层叠上下文中:
    • 如果是,谁的层叠等级大,谁在上面(怎么判断层叠等级大小呢?——看“层叠顺序”图)。
    • 如果两个元素不在统一层叠上下文中,请先比较他们所处的层叠上下文的层叠等级。
  • 当两个元素层叠等级相同、层叠顺序相同时,在DOM结构中后面的元素层叠等级在前面元素之上。后来居上

参考

juejin.im/post/684490…