CSS实现层叠样式

要求

使用CSS样式控制实现如下效果：

其中，绿色的是父布局，父布局中有两个子布局，一个红色和黄色，黄色子布局在红色子布局的上方显示。

实现

使用position和z-index属性来实现，css样式代码如下：

<style type="text/css">
.father{
    position:relative;              //父盒子位置要用relative
    margin:20px auto;
    width:400px;
    height:100px;
    background:green;
    }
.child-red{
    position:absolute;           //子盒子位置要用absolute
    width:100%;
    height:80px;
    background:red;
    z-index:2;
    }
.child-yellow{
    position:absolute;          //子盒子位置要用absolute
    width:100%;
    height:50px;
    background:yellow;
    z-index:4;
    }
</style>

z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。