<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 /*设置重叠的上下次序，值越大月在上方*/示例如下
1.
创建Html元素
<div class="top">
<div class="b">我是绝对定位，并且重叠在上方</div>
<div class="a">我是默认定位</div>
</div>2.
设置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}3.
观察显示效果
.wrap li:last-child{ border-right:none} 吧最后一个li的border-right的border去掉。。。但是兼容不好，ie好像是ie9以上的浏览器才行~~不行还有一种方法li给border，通过margin-left:-1px合并border，具体如下
body,ul{
margin:0
padding:0}
li{
list-style:none}
.wrap{
width:385px
height:39px
overflow:hidden
border-left:1px
solid
#0000f0
margin:30px
auto}
.wrap
li{
width:76px
height:37px
line-height:37px
text-align:center
border:1px
solid
#0000f0
float:left
margin-left:
-1px
}
妙味
妙味
妙味
妙味
妙味
演示：
