外层用relative相对定位，里面用absolute绝对定位，就能很好的实现你的要求了。z-index是用来控制div的z轴的。数值越高，越优先被显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div#a1{position:relative;}
div#a2{background-color:#eeeeee;position:absolute;z-index:1}
div#a3{background-color:#ffc000;position:absolute;z-index:2}
</style>
</head>
<body>
<div id="a1">
<div id="a2" >
1111111111111111111111<br/>
1111111111111111111111<br/>
1111111111111111111111<br/>
1111111111111111111111<br/>
</div>
<div id="a3" >
2222222222222222222222
</div>
</div>
</body>
</html>
注意：
z-index的使用：
通过对div的top和left定位，能很好的理解在页面坐标上的横轴和纵轴，那么当div层叠的时候，需要控制div的层叠顺序，哪个在上，哪个在下，实际上我们可以把网页看作是个三维坐标,x轴是横轴,y轴是纵轴,z轴垂直于网页,z轴上的点离原点越远,他的z值越高，形象的可以这样来描述，当某个div z轴的值越大，他离原点就越远,离浏览者的眼睛就越近,那么这个div就在其他的层之上,那么这个属性就是z-index，这个属性没有单位，默认z-index属性为0，数值越大越在上面。
总结:z-index默认值为0,z-index越大容器的显示越在前，z-index仅对relative,absolute,fixed有效。附position属性：
Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
使用position和负值空白边让div居中
2010-01-24 14:48:09 来源：心蕊设计 浏览：489次在前面的课程中，心蕊网页CSS实现div层居中。今天再给大家讲解一种使用position和负值空白边让div居中的方法。设计给大家讲解过
首先定义容器的宽度，然后将容器的position属性设置为relative，left属性设置为50%，就会把容器的左边缘定位在页面的中间。
|
#box{ |
这样是让容器的左边缘居中，我们希望让容器的中间居中。实现方法是对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半。这样会把容器向左移动它的宽度一半，从而让它在屏幕上居中。
|
#box{ |