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

最新推荐文章于 2024-04-01 15:52:10 发布

不爱吃榴莲.

最新推荐文章于 2024-04-01 15:52:10 发布

阅读量797

点赞数 17

分类专栏：前端程序员文章标签： css javascript 前端

本文链接：https://blog.csdn.net/m0_59117112/article/details/136768699

版权

前端程序员专栏收录该内容

9 篇文章 0 订阅

订阅专栏

两个不同元素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的定位元素

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

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。