这是我参与更文挑战的第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/absolute的定位元素，以及FireFox/IE浏览器（不包括Chrome等webkit内核浏览器）下含有position:fixed声明的定位元素，并且z-index值不是auto的是数字的时候，哪怕是0也会创建的。（我们平时开发用的最多的）
-
css3带来的一些新属性也会创建层叠上下文（具体自己查）
第二站：层叠顺序（stacking order）⛽
自我反思🤓：平时开发过于倚重z-index,忘了利用好其他元素属性。同时使用过多的z-index也会造成页面混乱。 记住下面的顺序，才是明白了css层叠的开始。
| 由低到高 |
|---|
| background/border |
| z-index的值 < 0 |
| block元素 |
| float浮动元素 |
| inline/inline-block元素 |
| z-index=0 或z-index =auto 或者没有z-index的元素 |
| z-index > 0 |
🚧 注意：如果元素的层叠顺序是一样的，可以参考mdn上的元素优先级
🚨重点理解的地方
- 谁大谁上：层叠水平谁的大谁在上面，例如在同一个层叠上下文z-index的值越大越在上面（注意层叠水平和z-index不是一回事）
- 后来居上：当层叠水平一致、层叠顺序一样的两个元素时候，后面的元素会覆盖前面的元素
第三站：层叠水平（stacking level）⛽
理解🤗：决定了同一个层叠上下文中元素在 z 轴上的显示顺序
快到终点了🚩
思考作业🤔：一旦普通元素具有了层叠上下文，其层叠顺序就会变高，用层叠顺序解释一下？
参考资料📃
《css世界》第七章-css世界层叠规则
