当前位置: 首页 > Web前端 > HTML5

让我们了解一下CSS中的级联上下文?

时间:2023-04-05 01:42:40 HTML5

前言受一些CSS交互的影响,给元素设置的z-index不会按照实际尺寸叠加。一直没搞懂原理。最近查阅了相关资料,做了一个小总结。Stackingcontext和stackingorder堆叠上下文(stackingcontent)在HTML中是一个三维的概念,即元素z轴。堆叠顺序是指堆叠时有特定的垂直显示顺序。CascadingCriterion谁大谁上当当在同一个级联上下文字段中有一个明显的级联级别指标,比如标识的z-index值,级联级别值大的会覆盖小的。当元素的堆叠层次和堆叠顺序相同时,DOM流中靠后的元素会覆盖靠前的元素。堆叠上下文的特点堆叠上下文具有以下特点:堆叠上下文的堆叠级别高于普通元素;堆叠上下文可以阻止元素的混合模式;层叠上下文可以嵌套,内部层叠上下文及其所有子元素受制于外部Cascading上下文;每个级联上下文独立于兄弟元素,即在执行级联变化或渲染时,只需要考虑后代元素;每个级联上下文都是自包含的,当元素被级联时,整个元素被认为是在父层叠上下文的层叠顺序中;当z-index值不为auto时,将为包含position:relative的定位元素创建一个堆叠上下文;位置:绝对;在FireFox/IE浏览器下包含位置声明的定位元素当其z-index不是自动时创建堆叠上下文的元素。HTML代码小红

小灰
CSScode.red-wrapper{position:relative;z-index:auto;}.red{位置:绝对;z-指数:2;宽度:300px;高度:200px;文本对齐:居中;背景颜色:棕色;}.gray-wrapper{位置:相对;z-index:auto;}.gray{位置:相对;z-索引:1;宽度:200px;高度:300px;:中心;background-color:gray;}当两个兄弟元素的z-index为auto时,它们是公共元素,子元素遵循“谁大谁大”的原则,所以小grayz-index:1;z-index:2;送给小红的是压在下面的。但是,当z-index成为一个值时,将创建一个堆叠上下文。每个堆叠元素相互独立,子元素服从父元素的堆叠顺序。将兄弟元素的z-index由auto改为0,其子元素之间的堆叠关系不受自身z-index的影响,而是由父元素的z-index决定。下面Red和Gray的父级z-index调整为0.red-wrapper{/*otherstyles*/z-index:0;}.gray-wrapper{/*otherstyles*/z-index:0;}你会发现小灰在小红之上,因为小灰的parent和小红的parent变成了堆叠上下文元素,而且堆叠层级是一样的,根据元素在文档流中的位置。CSS3对级联上下文display:flex|inline-flex的效果,级联上下文的parent是display:flex或者display:inline-flex;,子元素的z-index不是auto。这时候子元素(注意这里是子元素)就是堆叠上下文元素。HTML代码小灰小红CSScode.wrapper{display:flex;}.gray{z-index:1;宽度:200px;高度:300px;文本对齐:居中;背景色:灰色;}.red{z-index:-1;宽度:300px;高度:200px;文本对齐:居中;背景颜色:棕色;position:relative;}这样,由于display:flex;小灰的parent,它自己的z-index不是auto,所以变成了一个堆叠上下文元素,原本小灰的红底变成了小灰底。mix-blend-mode与级联上下文具有mix-blend-mode属性的元素是级联上下文元素的CSS属性mix-blend-mode(混合模式),可以将叠加元素的内容和背景混合在一起。代码同上,只是给小灰添加了mix-blend-mode属性。为了看到混合效果,在外部容器中添加背景图像。.wrapper{background-image:url("./jz.png");}.gray{/*otherstyles*/mix-blend-mode:darken;}同样,小灰有mix-blend-mode属性,就变成了一个级联的上下文元素,让小灰成为最底层。不透明度和级联上下文如果元素的不透明度不为1,则此元素为级联上下文元素HTML代码小灰小红CSS代码.gray{z-index:1;宽度:200px;高度:300px;文本对齐:居中;背景色:灰色;不透明度:0.5;}.red{z-index:-1;宽度:300px;200像素;文本对齐:居中;背景颜色:棕色;position:relative;}因为小灰本身有opacity半透明属性,所以成为分层的context元素,使得小红z-index:-1;无法穿透。转换和级联上下文。应用了转换的元素是级联上下文元素。代码同上,只是将transform应用于小灰。.无法穿透。filter和具有堆叠上下文filter属性的元素就是上面的堆叠上下文元素代码,只是小灰增加了filter属性。.仍然在格雷之上。will-change具有堆叠上下文will-change属性的元素与堆叠上下文元素代码相同,只是小灰增加了will-change属性。.gray{/*其他相关样式*/filter:will-change;}结果同上。总结大体看元素级联规则,首先要明白什么情况下元素是包含定位属性position:relative|absolute|fixed;的级联上下文元素,而z-index不是auto(webkit内核浏览器,fixedpositioning没有这样的限制)是一个堆叠上下文元素;该元素具有一些CSS3属性,可以成为堆叠上下文元素:父级为display:flex|inline-flex;子元素的z-index不是auto,此时子元素(注意这里是子元素)是一个堆叠上下文元素,一个元素有mix-blend-mode属性,一个元素有opacity1以外的属性,有transform元素的元素,有filter属性的元素,有will-change属性的元素,有will-change属性的元素接下来,了解堆叠准则:“who”是谁bigone”,“后来居上”,最后就是了解级联上下文的主要特性(具体见文中级联上下文的特性)。over~