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