没人告诉你关于 z-index 的一些事

Published by Xianqiao Wang on July 24th, 2015

堆叠上下文

同一个父元素下面的元素会受父元素的堆叠顺序影响,所以堆叠上下文是我们理解 z-index 和堆叠顺序的关键。(下面为了简化,我们称堆叠上下文为层。)
每一个层都有唯一的根节点。当一个元素创建一个层,那么它的所有子元素都会受到父元素的堆叠顺序影响。意味着如果一个元素位于一个最低位置的层,那你 z-index 设置得再大,它也不会出现在其它层元素的上面。
现在我们来说说什么情况下会产生新的层(默认最上):
  • 当一个元素位于HTML文档的最外层(<html>元素)
  • 当一个元素被定位了并且拥有一个 z-index 值(不为auto)
  • 当一个元素被设置了opacitytransformsfilterscss-regions(富页面布局)paged media(分页规则)等属性。

http://web.jobbole.com/82884/