DOM层级顺序与z-index

前言

DOM层级顺序，大概来说就是DOM节点在z轴方向（垂直于屏幕向外的方向）的显示优先级。为了调整DOM层级顺序，我们想到的往往就是用CSS的z-index属性来控制。虽然看着很简单，但是有时在使用时，我们有时也许会碰到一些一些奇奇怪怪的问题：

• 为什么有时候将z-index设成很大的值（比如9999），节点依然不能显示在最前面？
• z-index属性设为0和不设置z-index属性有什么区别？
• float元素和定位元素谁显示的优先级更高？

其实看似简单的层级顺序它自己的一套规则，理解这些规则可以帮助我们在开发中少踩坑。

规则

1. 顺序规则

在不设置position属性（或设置成static）的情况下，文档流后面的DOM节点会覆盖前面的DOM节点。

<div id="a">A</div>
<div id="b">B</div>

PS：怎么样来让文档流中的节点叠在一起呢？比如我们可以设置DOM的margin-top为负数，这样就让两个节点叠在起一起了。不过为了简化说明，并没有把这些写出来。下同。

2.定位规则

定位节点（position属性设置为relative，absolute或fixed的节点）会覆盖非定位节点（不设置position属性或position属性设为static的节点）

<div id="a" style="position: relative">A</div>
<div id="b">B</div>

根据顺序规则和定位规则, 我们可以做出更加复杂的结构。A和 B 都设为非定位节点，A 的子节点 A-1 设定定位节点。

<div id="a">
    <div id="a-1" style="position: relative">A</div>
</div>
<div id="b">B</div>

3. 参与规则

z-index属性仅对定位节点生效。

有三个DOM节点，其定位为static。但是A的z-index最大，但是依旧是在最底部，C的z-index最小，而在最顶部，因此可知z-index并未生效，此时为顺序规则在生效。

<div id="a" style="z-index: 2">A</div>
<div id="b" style="z-index: 1">B</div>
<div id="b" style="z-index: 0">B</div>

我们将B和C的position设置为relative之后，顺序发生了变化。根据参与者规则和定位规则，A不是定位节点，所以即使z-index最大，还是在最底部。而根据参与规则和默认值规则（下一节介绍），B和C都是定位节点，且B的z-index要大于C，所以B在最顶部。

<div id="a" style="z-index: 2">A</div>
<div id="b" style="position: relative; z-index: 1">B</div>
<div id="b" style="position: relative; z-index: 0">B</div>

4. 默认值规则

• 对于所有的定位节点，z-index值大的节点会覆盖z-index值小的节点。
• z-index设为0和没有设置z-index的节点在同一层级内没有高低之分。在IE6和7种，z-index的默认值为0，其他浏览器中默认值为auto。

<div id="a" style="position: relative; z-index: 1">A</div>
<div id="b" style="position: relative; z-index: 0">B</div>
<div id="c" style="position: relative">C</div>
<div id="d" style="position: relative; z-index: 0">D</div>

5. 从父规则

两个节点A和B都是定位节点，如果节点A的z-index值比节点B的大，那么节点A的子元素都会覆盖在节点B以及节点B的子节点上。

<div id="a" style="position: relative; z-index: 1">
    <div id="a-1">A-1</div>
</div>
<div id="b" style="position: relative; z-index: 0">
    <div id="b-1">B-1</div>
</div>

如果定位节点A和B的z-index值一样大，那么根据顺序规则，B会覆盖A，那么即使A的子节点的z-index比B的子节点大，B的子节点还是会覆盖A的子节点。(这就是为什么即使我们把A-1的z-index设置得很大，依然无法盖住B节点的原因)。

<div id="a" style="position: relative; z-index: 0">
    <div id="a-1" style="position: relative; z-index: 2">A-1</div>
</div>
<div id="b" style="position: relative; z-index: 0">
    <div id="b-1" style="position: relative; z-index: 1">B-1</div>
</div>

6. 层级树规则

定位节点，且z-index有整数值的（不包括z-index:auto），会被放置到一个与DOM节点不一样的层级树里。

在下面的DOM节点中，A和B是兄弟节点，但是在层级树种，A和B-1才是兄弟节点（因为他们都是Root下的第一层含有整数z-index的定位节点），所以A在B和B-1之上。虽然A-1的z-index比B-1的小，但是根据从父规则，A-1也在B-1之上。

<div id="a" style="position: relative; z-index: 2">
    <div id="a-1" style="position: relative; z-index: 0">A-1</div>
</div>
<div id="b">
    <div id="b-1" style="position: relative; z-index: 1">B-1</div>
</div>

下面这个更复杂的层级树，聪明的你能看明白为什么节点层级是这样的了吗？

<div id="a" style="position: relative; z-index: 2">
    <div id="a-1" style="position: relative; z-index: 100">A-1</div>
</div>
<div id="b">
    <div id="b-1" style="position: relative">
        <div id="b-1-1" style="position: relative; z-index: 10">B-1-1</div>
    </div>
</div>
<div id="c" style="position: relative">
    <div id="c-1">
        <div id="c-1-1">
            <div id="c-1-1-1" style="position: relative; z-index: 1">C-1-1-1</div>
        </div>
    </div>
</div>

层叠上下文

介绍了这么多规则，是在是不好理解，又很难记。其实，要理解这些规则，我们只需要理解一个概念就行了，它就是层叠上下文。

概念

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

特性

• 子元素的 z-index 值只在父级层叠上下文中有意义。
• 子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

产生的条件

满足一下其中一个条件，即可产生一个层叠上下文：

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• position: fixed
• opacity 属性值小于 1 的元素
• transform 属性值不为 "none"的元素
• filter值不为“none”的元素
• -webkit-overflow-scrolling 属性被设置 "touch"的元素

附录：层叠的顺序表