CSS 的层叠上下文是什么

层叠上下文是 HTML 中的一个三维的概念，每个层叠上下文中都有一套元素的层叠排列顺序。页面根元素天生具有层叠上下文，所以整个页面处于一个“层叠结界”中。

层叠上下文的创建：

• 页面根元素：html
• z-index 值为数值的定位元素
• 其他 css 属性
  • opacity 不是 1
  • transform 不是 none
  • flex，z-index 不是 auto

层叠上下文中的排列规则，从下到上：

• background/border
• 负 z-index
• block 块状水平盒子
• float 浮动盒子
• inline 水平盒子
• z-index:auto, 或看成 z-index:0
• 正 z-index

由此引申出：定位元素的z-index：0和z-index：auto的区别是，前者会创建层叠上下文，影响布局。

转载于:https://www.cnblogs.com/wangxi01/p/11213912.html