CSS实现多个颜色框顺序叠加效果

在CSS样式中加入以下代码：
.div-relative{position:relative;color:#000;border:1px solid#000;width:500px;height:400px}
.div-a{position:absolute;left:30px;top:30px;z-index:100;background:#F00;width:200px;height:100px} /* 背景色为红色 *
/.div-b{position:absolute;left:50px;top:60px;z-index:80;background:#FF0;width250px;height:200px} /* 背景为黄色 *
/.div-c{position:absolute;left:80px;top:80px;z-index:70;background:#00F;width:300px;height:300px} /* 背景为蓝色 *
/z-index的值为正整数值，数字越大对应对象层越浮上层（越靠前。
以上实例默认顺序是“.div-c”浮在最上层（蓝色背景层）、“.div-b”浮在中层（黄色背景层）、“.div-a”排最底层（红色背景层）。我们接下来使用z-index样式在不改变html代码情况下实现顺序颠覆，“.div-b”浮在中层（黄色背景层）排序不变，实现“.div-a”浮在最上层（红色背景层）、“.div-c”排最底层（蓝色背景层）。
left，right，top，bottom绝对定位相当于父级具体位置。