<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
#father{
position:relative/*父盒子位置要用relative*/
margin:20px auto
width:400px
height:100px
border:1px solid red
}
#father #a{
position:absolute/*子盒子位置要用absolute*/
width:100%
height:50px
background:blue
opacity:0.6
z-index:2
}
#father #b{
position:absolute/*子盒子位置要用absolute*/
width:100%
height:80px
background:#F4AF19
text-align:right
z-index:1
}
</style>
</head>
<body>
<!--按上面的CSS定位方法布局就会重叠，那个子盒子在前面用Z-INDEX 决定-->
<div id="father">
<div id="a">我是A盒子</div>
<div id="b">我是B盒子</div>
</div>
</body>
</html>
重叠在一起需要改变默认的布局方式，将其中一个显示在上层需要设置深度顺序，这两点分别用如下样式完成
position: absolute /*设置为绝对定位*/z-index:999 /*设置重叠的上下次序，值越大月在上方*/
示例如下
创建Html元素
<div class="top"><div class="b">我是绝对定位，并且重叠在上方</div>
<div class="a">我是默认定位</div>
</div>
设置css样式
div.top{margin:50pxpadding:20pxwidth:200pxheight:200pxborder:2px dashed #ebbcbe}div.top div{width:100pxheight:100pxpadding:10pxcolor:white}
div.a{background:red}
div.b{background:greenposition:absolutetop:100pxleft:100pxz-index:999}
观察显示效果
