要求
使用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的数字越高越靠前,并且值必须为整数和正数(正数的整数)。