关于css:由zindex属性引发对层叠上下文的全面认知

在日常开发中,常常应用z-index款式属性调整元素的层级大小。个别状况下,都能达到元素之间笼罩成果的要求。但在某些场景下,不管定位元素z-index属性值设置多大,都无奈在页面的最顶层出现。尽管能够能够把该元素晋升为<body>的间接子元素,并且的确能够达到成果,但比拟繁琐,开发效率比拟低下。为此,开始对z-index款式属性开始钻研,但钻研到最初发现:页面的渲染是由若干个图层通过层叠上下文的程序,顺次渲染而成。上面就层叠上下文全面说说。

层叠上下文(stacking context)

层叠上下文是HTML中的一个三维概念,是元素在z轴上的绝对地位的形容。对于已经通过photoshop设计稿来获取页面元素尺寸的开发者而言,层叠上下文和图层的概念十分相似。

元素造成层叠上下文的条件

  1. 文档根元素(<html>);
  2. position 值为 absolute(相对定位)或 relative(绝对定位)且 z-index 值不为 auto 的元素;
  3. position 值为 fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有挪动设施上的浏览器,但老的桌面浏览器不反对);
  4. flex (flex) 容器的子元素,且 z-index 值不为 auto;
  5. grid (grid) 容器的子元素,且 z-index 值不为 auto;
  6. opacity 属性值小于 1 的元素(参见 the specification for opacity);
  7. mix-blend-mode 属性值不为 normal 的元素;
  8. 以下任意属性值不为 none 的元素:
    transform、
    filter、
    backdrop-filter、
    perspective、
    clip-path、
    mask / mask-image / mask-border
  9. isolation 属性值为 isolate 的元素;
  10. will-change 值设定了任一属性而该属性在 non-initial 值时会创立层叠上下文的元素;
  11. contain 属性值为 layout、paint 或蕴含它们其中之一的合成值(比方 contain: strict、contain: content)的元素。

层叠上下文之间的关系

层叠上下文的子元素在满足条件后能够造成一个新的子层叠上下文,从而整体上造成层叠上下文的树形关系(父子嵌套、兄弟平行)。

不同层叠上下文的各个子元素,其影响范畴仅限于父级层叠上下文,而不会影响到其余层叠上下文。例如:

上图中:

  • 左侧中的main1和main2设置了z-index为0,造成了新的层叠上下文,并且main2的层级比main1大;move1设置了z-index为999999,但因为无奈冲破父级层叠上下文的限度,无奈笼罩在move2的下面。
  • 右侧中的main1和main2设置了z-index为auto,无奈造成了新的层叠上下文;move1和move2有独特的父级层叠上下文,因为move1设置了z-index为999999,所以能够笼罩在move2的下面。

试试看

层叠程序(stacking order)

一个层叠上下文的子元素能够是层叠上下文,也能够不是层叠上下文。子元素在z轴上的程序规定,是通过层叠程序来表白的。具体如下图所示:

整体示意图

总结

z-index引发了对层叠上下文的全面认知。当初利用层叠上下文的逻辑,解释结尾的景象:因为设置z-index属性的定位元素,其父元素为层叠上下文(也为定位元素),并且父元素并非位于整个页面的最高层级;所以设置z-index属性的定位元素,无论其z-index属性值设置多大,都无奈冲破父元素的限度,达到整个页面的最高层级。

在日常开发中,有很多开发者在面对元素层叠场景时,都会为每个相干元素增加z-index属性。心愿这篇文章能对这种行为有所帮忙,全面认知层叠上下文,缩小非必要z-index属性的书写。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据