乐趣区

关于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 属性的书写。

退出移动版