快速了解css层叠规则

前言📣

• ❌ 设置层叠样式就只会用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世界层叠规则

欢迎点赞关注🌾

个人博客 | github-雾灵