深入理解层叠上下文

在没有彻底理解层叠上下文之前，我一直以为谁的z-index大，谁就显示在全面，比如这样：

但是当页面复杂化的时候，层级嵌套非常深的时候，就容易出现各种奇奇怪怪的效果，比如这样：

  <div id="div2">
    z-index: 5
  </div>
  <div id="div3">
    <div id="div4">z-index: 6;</div>
    z-index: 4;
  </div>

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

但是为什么z-index5会覆盖z-index6呢？

请一定要注意 DIV #4 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。

DIV #3 被渲染在 DIV #2 之下，因为 DIV #2 的 z-index (5) 而 DIV #3 的 z-index (4) 在 root 元素的层叠上下文中生效

而 DIV #4 的 z-index (6) 在 DIV #3 的层叠上下文中生效。因此，DIV #4 在 DIV #2 之下，因为 DIV #4 归属于 z-index 值较低的 DIV #3 元素。

说白了意思就是，子元素的层级受父元素的影响。其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

分辨出层叠的元素在 Z 轴上的渲染顺序的一个简单方法是将它们想象成一系列的版本号，子元素是其父元素版本号之下的次要版本。

DIV #2 - z-index 为 5
DIV #3 - z-index 为 4
  DIV #4 - z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6

通过这个方法我们可以轻松地看出为什么一个 z-index 为 5 的元素（DIV #2）层叠于一个 z-index 为 6 的元素（DIV #3）之上。