层叠上下文 z-index

今天看到一张层叠上下文的图片还蛮有意思，到底子元素的 z-index 值是在父元素的z-index上叠加值，还是以root元素作为参考，一张图就搞定了这几个疑问。

在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 z-index 属性。层叠上下文的层级如下：

Root
     DIV #1  *z-index 为 5*
     DIV #2  *z-index 为 2*
     DIV #3  *z-index 为 4*
         DIV #4  *z-index 为 1，在一个 z-index 为 4 的元素内层叠
         DIV #5 *z-index 为 3，在一个 z-index 为 4 的元素内层叠
         DIV #6  *z-index 为 6，在一个 z-index 为 4 的元素内层叠

渲染的顺序： 层叠的元素在 Z 轴上的渲染顺序是从小到大，所以先渲染DIV#2，注意 DIV#4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素作为一个整体传递给 root 元素，再渲染DIV#1。

有意思的事情是文章开头两个疑问都不是正确的。 特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。并且对父元素之外的z-index不起任何作用（覆盖）。这意味着层叠上下文只在父层叠上下文中 按顺序进行层叠。

关于z-index的具体讲解请参考
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

---