CSS中的两个重要概念：层叠上下文和层叠级别

一、层叠级别 —— stacking level 的概念

层叠级别是用于决策和判断：同一个层叠上下文中的背景边框和众多内部元素要以什么样的顺序来排序。即决定这些元素在这个“上下文环境”下，谁排在上，谁排在下。

两个不同元素A和B，比较它们谁在上谁在下，得建立在一个前提基础下：A和B得在同一个层叠上下文。只有在同一个层叠上下文内的两个元素，才有可比性，才有层叠级别而言。

即：

• 层叠级别是建立在同一个层叠上下文的基础上的概念

• 同一个层叠上下文内的元素之间，才有层叠级别的差异，才有排列上或下的差别。

二、层叠级别的排列图

由低级到高级：

• 背景、边框 —— 层叠上下文的背景和边框

• 负 z-index —— 即z-index为负值的内部元素

• 块盒子

• 浮动盒子

• 行内盒子

• z-inde:0 —— z-index为0的内部元素

• 正 z-index —— z-index为正值的内部元素

总结：

• 除了层叠上下文的背景、边框，其它都是层叠上下文的内部元素

• 在同一个层叠上下文内，内容是比较重要的内部元素，它的层叠级别就比较高，自然就会排在上面，即离屏幕越近。如直接给用户呈现内容的行内元素

• 相反，像背景和边框，仅仅作修饰，在整个层叠上下文中相对来说它不那么重要。所以它的层叠级别较低，就排在最下面。

规则总结

===================================================================

• 先判断两个元素是否在同一个层叠上下文

• 若在同一个层叠上下文，这两个元素属于该层叠上下文内的两个内部元素。那么就比较这两个内部元素的层叠级别。（ 层叠级别高排在上，层叠级别低排在下，若层叠级别相同则后来者居上 ）

• 若不在同一个层叠上下文，则比较其父元素层叠上下文的层叠级别。

总结

=================================================================

概念：

• 层叠上下文是HTML中的一个三维概念。它与网页的z轴有关系。层叠上下文和块级上下文类似，它是可以被创建的。

• 层叠级别用于判断：在同一个层叠上下文中，背景边框和众多内部元素以什么样的顺序来进行z轴上的排序。

创建层叠上下文：

• 根元素

• position不为static，且z-index为具体值不为auto的定位元素

层叠级别：

• 背景、边框 —— 层叠上下文的背景和边框

• 负 z-index —— 即z-index为负值的内部元素

• 块盒子

• 浮动盒子

• 行内盒子

• z-inde:0 —— z-index为0的内部元素

• 正 z-index —— z-index为正值的内部元素

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！