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

Cascadingcontext和z-index

时间:2023-03-31 13:31:54 CSS

z-index是我们之前比较常用的一种语法。看起来比较简单,其实也不难,因为这个东西跟之前说的vertical-align不一样。这更符合我们的认知。好了,废话不多说,开始我们的正题。首先?让我们首先了解堆栈上下文是什么。其实一般来说就是你看电脑方向的显示顺序。例如,桌子上有很多文件。你看的话,每一张纸,其实都可以理解为一个stackingcontext中的一个stacklevel。看到的往往是最前面的论文,后面的都被挡住了。好吧,首先是最简单的一点。如果一堆完全重叠的值,你能看到的往往是最上面的一张纸,也就是离你眼睛最近的一张纸。但是,对于我们的z-index,值越大,越接近你的眼睛。在论文中的位置越高。所以,在下面的代码中,你应该一眼就能看出哪个元素在哪个元素的前面。.paper1{位置:绝对;背景颜色:橙色;z-指数:2;宽度:100px;height:100px;}.paper2{position:absolute;背景色:灰色;z-指数:5;宽度:50px;height:50px;

下面是结果图,我看你和你一样聪明,你一定猜到了.那么另一个问题来了,z-index大的会覆盖z-index小的吗?废话不多说,直接看下面的代码。.paper1{位置:绝对;宽度:100px;高度:100px;背景:橙色;z-index:3;}.paper2{位置:绝对;宽度:200px;高度:200px;背景色:浅绿色;:2;}.??paper3{位置:绝对;顶部:80px;宽度:50px;高度:50px;背景色:红色;z-index:4;
你觉得哪个有最高级别?我们来看看最终的运行结果。不是说.paper3在最上面,好像是被.paper1挡住了,按理说z-index不是越大级别越高吗?为什么会这样?实际上,当z-index不为auto时,会自动创建自己的层级上下文,即paper1和paper2在同一层级,都在根环境上下文中。但是paper3是在paper2的环境上下文中,因为paper1的level比paper2高,所以即使paper3的z-index再大,还是会被paper1挡住。那么,问题又来了,只有当z-index不是auto时才会创建ambientcontext吗?答案肯定是否定的。其实我们平时使用的很多css属性都会自动创建一个环境上下文。来看看这块mdn列出的一些属性(这篇文章更新于2019.3.25,如果看到这篇文章已经好几个月,甚至一两年了。推荐阅读英文mdn页面:https://developer.mozilla.org...)。层次上下文创建条件:文档根元素.position取值为absolute或relative,且z-index取值为非auto.position取值为fixed或sticky(适用于所有手机浏览器,旧的电脑端浏览器不支持)flex容器的子元素,它的z-index值不是auto;opacity的值小于1并且mix-blend-mode的属性值不正常当以下属性的值不为none时:Transformfilterperspective的值,clip-pathmask/mask-image/mask-borderisolation是isolate-webkit-overflow-scrollingistouch当will-changecontain的值是layout,paint或它们的组合(例如contain:strict,contain:content)看完上面的列表,你应该明白为什么当我使用z-index时,我总是添加position:absolute。那么,如果z-index值相同,会如何显示呢?事实上,他会按照顺序,后者覆盖前者。例如:.paper1{位置:绝对;宽度:100px;高度:100px;背景:橙色;z-index:2;}.??paper2{位置:绝对;宽度:200px;高度:200px;背景色:浅绿色;z-index:2;结果图如下:那如果这时候两个div交换一下呢?那么就会如下图所示。黄色的补丁已经被蓝色的完全挡住了。但是如果是下面的代码形式呢?.paper1{显示:内联块;宽度:100px;高度:100px;背景:橙色;}.paper2{位置:绝对;宽度:200px;高度:200px;背景色:浅绿色;top:0;此时黄色小块会被挡住,不管paper1在前面还是在paper2后面,最后的结果还是一样。如下图,但是,如果给.paper1加上一个transform:scale(1),就会显示出来,而且还是按顺序显示,后面的会先显示。那么为什么会这样呢?首先?在堆叠上下文中,其中的不同元素实际上具有不同的堆叠顺序。其实下图已经很好的说明了这一点。是background/border->negativez-index->??frombottomtotop。blockhorizo??ntalbox->float浮动元素->inlinehorizo??ntalbox->z-index:auto或z-index:0->positivez-index。这与我们平时的开发表现是一致的。但是请注意z-index:auto和z-index:0;的层次结构。它实际上位于行内水平元素之上,因为很多定位元素,以及上面列出的CSS3标签,都有默认的z-index:auto;所以在最后一个例子中,绝对定位的元素总是会覆盖它的内联块元素。然而,在添加transform:scale(1)之后,它的inline-block元素实际上会默认为一个z-index:auto;所以他们两个其实是一个级别的,所以他们遵循的是后来居上的规则。谁在后面,谁就在上面。同理,如果这两个元素是z-index:0和z-index:auto;,它们都遵循从后而来的规则。它们之间唯一的区别是z-index:0会创建一个新的堆叠上下文,而z-index:auto;将不会;另外,在众多的css3属性中,比如transform虽然默认是z-index:auto,但实际上会创建一个新的stackingcontext,所以,在这种情况下,你可以自己去理解对于上面列出的CSS3属性,一个默认z-index:0就足够了。当然,我会再写一个负z-index的例子,作为给大家的一个小练习。不过相信有了上面的铺垫,这对大家来说应该问题不大。paper1{显示:内联块;宽度:100px;高度:100px;背景:橙色;}.paper2{位置:绝对;宽度:50px;高度:50px;背景色:浅绿色;顶部:0;z-index:-1;此时的结果如下图所示。此时,由于paper2的z-index为-1,而且paper1和paper2都在同一个stackingcontext(root)下,paper2自然在paper1之下。上图中也有显示。但是如果在.paper1中添加了transform:scale(1),情况就不一样了,如下图:其实是因为在添加了transform:scale(1)之后,实际上在里面新建了一个paper1创建了一个stackingcontext,那么paper2既然在paper1的stackingcontext中,自然就显示出来了。不管它的z-index值有多小。好了,上面说的差不多了,不过还是为了方便大家的理解。最后简单说一下它的原理。首先,它的渲染树是深度优先的树结构。那么,第一次渲染实际上会比后面的渲染层次更高。这和我们用不同的油漆刷墙是一样的。它将覆盖首先绘制的那些颜色。其实网站的渲染也是类似的。同时,在同一个层级,后者比前一个层级高,其实是由它的遍历方式决定的,这个我就不多说了。好了,到此结束,感谢大家的观看,如果大家有什么问题想讨论,或者我有什么错误或者疏漏的地方,请给我留言,谢谢大家,觉得不错可以关注微信公众号:WorkingTechnology,每周一期,有一篇前端相关的原创干货分享和推荐阅读:https://developers.google.com...https://www.w3.org/TR/css-pos...张新旭《CSS世界》zhongz-index章节本文转载自:http://www.lht.ren/article/21/