持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

层叠上下文

元素在z轴上的层级关系

层叠顺序（层叠水平）

在一个层级上下文中的叠放顺序；

自下而上的层叠水平(stacking level)：

• background/border
• z-index<0
• block box
• float
• inline box
• z-index:auto/z-index=0
• z-index>0

层叠等级

元素的叠放顺序； 首先是不同层级上下文的比较，然后是同一层级内，层叠顺序的比较；

产生层叠上下文的情况

• 根元素html
• position为非static，且z-index不为auto
• css3新属性：如父元素设置为display:flex,且当前元素设置z-index不为auto；还有当前元素设置opcatity、transfrom等属性