3分钟快速学习CSS层叠（精简版）?‍♂️

这是我参与更文挑战的第3天，活动详情查看： [更文挑战]

前言?

• ❌ 设置层叠样式就只会用z-index这个属性
• ❌ 一直用 z-index:3;z-index:99;z-index:999;… 这样根据大小来调整元素的上下顺序
• ? z-index只是css层叠的冰山一角，（在定位元素和display:flex的元素中z-index生效）还有比它更重要的东西需要我们知道
• ? 目标：理解层叠上下文、层叠水平、层叠顺序，就?了

开始学习?（全程大约5分钟）

第一站：层叠上下文（stacking context）⛽

它是HTML中一个三维的概念，你可以认为层叠上下文的元素比普通元素在z轴上要“高人一等”。这是为什么呢？
思考?：一个普通元素如何变成层叠上下文元素呢？

• html的根元素就是一个层叠上下文元素
• position:relative/position:absolute的定位元素，以及FireFox/IE浏览器（不包括Chrome等webkit内核浏览器）下含有position:fixed声明的定位元素，并且z-index值不是auto的是数字的时候，哪怕是0也会创建的。（我们平时开发用的最多的）
• css3带来的一些新属性也会创建层叠上下文（具体自己查）

第二站：层叠顺序（stacking order）⛽

自我反思?：平时开发过于倚重z-index,忘了利用好其他元素属性。同时使用过多的z-index也会造成页面混乱。 记住下面的顺序，才是明白了css层叠的开始。

? 注意：如果元素的层叠顺序是一样的，可以参考mdn上的元素优先级

?重点理解的地方

• 谁大谁上：层叠水平谁的大谁在上面，例如在同一个层叠上下文z-index的值越大越在上面（注意层叠水平和z-index不是一回事）
• 后来居上：当层叠水平一致、层叠顺序一样的两个元素时候，后面的元素会覆盖前面的元素

第三站：层叠水平（stacking level）⛽

理解?：决定了同一个层叠上下文中元素在 z 轴上的显示顺序

快到终点了?

思考作业?：一旦普通元素具有了层叠上下文，其层叠顺序就会变高，用层叠顺序解释一下？

参考资料?

《css世界》第七章-css世界层叠规则

欢迎点赞关注?

个人博客 | github-雾灵