使用z-index和position:absolute实现DIV的裁切、遮盖效果

在DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV一讲中，我讲述了一个使用DIV覆盖实现了“网页中弹出用户登陆注册框”的效果，由于那个例子使用到了CSS滤镜——灰度的写法，所以对一些初学者来说咋一看上去比较难。所以在本讲当中，我们重新对其原理进行剖析。详细讲解一下使用DIV实现覆盖（遮挡）、裁切的方法。

我们先看代码：

为了演示方便，我们将CSS代码写在html文档中，上面的代码实现的效果如下：

我们来分析上面的代码：容器contain_01的宽和容器contain_02的宽一致，高也都为100像素，容器contain_01为红色背景，容器contain_02为蓝色背景，从浏览器中预览的效果可以看出，容器contain_02的高度变小了，其高度只有50像素了。还有50像素哪去了呢？这是因为容器contain_01的z轴为2，容器contain_02的z轴为1，显然容器contain_01覆盖（遮挡）了容器contain_02，假如在实际开发当中，容器contain_02当中的背景图片是由很多很多小图片拼合而成的，我们要求在页面中只显示其中一个小图片，那么我们这个写法就可以派上用场了，因为这种效果也可以看做是容器contain_01对容器contain_02的裁切，使其显示裁切后的部分。上例中蓝色的部分就是被裁切剩下的。

注意：当你使用z-index的时候，务必使用position:absolute;，也就是说，z-index要和position:absolute同时使用。