css

zIndex 的层叠上下文

Posted by jiananshi on 2017-05-27

上一篇字儿少了点,再写一篇吧

这篇文章想写一下工作中遇到过的一个问题,也是这个博客少有的 CSS 相关文章… 我考虑过为什么 CSS 相关的内容较少,原因主要是日常开发中对 CSS 的关注远不如 JS,而且随着浏览器发展,兼容性这个话题越来越薄弱了。当然,最主要的原因是我 CSS 不好 🤗。

浏览器的布局按照从左到右,从上到下的顺序排列,在使用了 position 或者 float 之类改变元素文档流的情况下,元素和元素之间可能会出现重叠,这时哪个元素放在 “前面”,除了我们代码的书写顺序,就由 zIndex 这个属性决定。

zIndex 越大的元素越靠近 “前面”,我们对 zIndex 的认知一直是这样,下面看一个例子:

jsfiddle

preview

可以看到元素 #b 的 zIndex 设置到了一个极大的数,但依然位于
#c(zIndex 仅为 2)下面,这是由于两个元素的层叠上下文(stacking context)不同导致的。

下面是 w3c 对层叠上下文的定义:

  • 每个元素都属于一个层叠上下文环境
  • 每个元素都有一个层叠上下文的优先级,决定了它在z轴上的顺序
  • 元素可能有负值的层叠优先级
  • 同样层叠优先级的元素显示顺序由文档树决定,排在后面的靠 “上”

上文中的元素都是英文的 box,用元素更便于理解,但是它是同 HTML element 完全不同的两个概念。

会创建层叠上下文的有以下三种情况:

  • document root( 标签)
  • 当元素的 position 属性有非 static 的值,且 zIndex 不为 auto
  • 元素的 opacity 属性的值小于 1

上面例子中的 #b 就是因为在一个新的层叠上下文中,因此无论 b 的 zIndex 值再怎么大,在层叠上下文上它已经大(深)于 c 一个层级了,因此不会覆盖上面的层叠上下文。

最后附一张宝宝的梦中情 🐱:

cat