z-index 实例讲解

最近有朋友在留言中问我关于 CSS 中 z-index 的问题，来回纠结了好几个回合，也不知道现在对方到底搞清楚没，我想授人以鱼，还不如授人以渔，所以就整理了一下 z-index 属性的一些基本用法，顺便做了一个 DEMO 实例便于比较学习。本来想参考一下网上有没有现成的教程照搬一个，但是搜了一下，有的写的很简单，甚至没有实例，初学者不太能有直观的印象，有的则写的太复杂，把不太可能碰到的特殊情况都列入其中，太打击初学者的积极性了。看来看去还是我写的比较适中，哈哈，只要看会以下几点，这 z-index 的基本用法也就会了。

用法：z-index: auto | number;

在没有定义 z-index 时，默认就是 auto 值，number 就是非默认情况下 z-index 的取值，范围是整数，一般我不太用到负数。这个 z-index 还是很好理解的，就是三维坐标轴上的 Z 轴，也就是垂直于显示器的那根轴，z-index 的值大的将叠堆在值比较小的之上，换句话说，就是 z-index 数值越大就离我们的视线越近！有一点需要注意的是：z-index 属性仅适用于定位元素，比如说 position:absolute;position:relatve;position:fixed; 没有这三种之一的定位支持，单独使用 z-index 是无意义的。

下面来看两个实例：

以下实例中的关键样式：

实例一 HTML 部分：

实例一 效果：

实例二 HTML 部分：

实例二 效果：

通过以上两个例子，就可以很轻松地理解 z-index 的基本用法了，当然，还有需要注意的一点是，如果两个进行比较的 z-index 不是处在同一级的标签中，则各自向上寻找动态定位元素，并分别对其祖元素进行比较，此时，子元素的 z-index 值无论多大，都是父元素大的居上。这段话一时之间比较难理解，佩上实例三就会明白了：

实例三 HTML 部分：

实例三 效果：

在这里可以看到，虽然黄色方块的 z-index:4 值大于红色方块的 z-index:3，但是红色却仍然盖住了黄色，那是因为红色是蓝色方块的子元素，而黄色是绿色方块的子元素，此时就要先比较蓝色与绿色方块，显然蓝色的 z-index:2 比绿色的 z-index:1 大，于是红色方块也就“狐假虎威”地盖过了绿色和黄色。

花花绿绿的，有没有把你绕晕呢？z-index 还有很多乱七八糟的复杂的特殊情况，不过如果掌握以上三个实例，我觉得也就十拿九稳了，欢迎补充～

另外，为了方便大家参考，我把以上三个实例合并在一起做了一个 DEMO，有兴趣的朋友可以看一下，查看其源码就可以看到完整的 DIV+CSS 了。