我想通过一个例子讲解一下div+css中的定位问题，谁能给个例子，谢了
CSS 相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
如下图所示：
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
那么我们就会想了怎么让框三把框二覆盖呢，很自然的想到把框3的z-index设为一个优先级高的值如100，但是这样并不能得到我们想要的结果，必须把框2的z-index设为优先级低的如-1，
我猜想是因为框2已经脱离了文档流，所以只设置框3的z-index对框2起不到作用，所以只能对框2操作了。大家也可以去试试代码如下在ie7下通过：
<html>
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
span
{
background-color: Red;
width: 30px;
height: 30px;
}
#box_relative
{
position: relative;
left: 10px;
top: 10px; background-color: gray;z-index:-1;
}
</style>
</head>
<body>
<span></span><span id="box_relative"></span><span style="z-index:30"></span>
</body>
</html>
CSS 绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
#box_relative {position: absolute;
left: 30px;
top: 20px;
}
如下图所示：
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
同样的道路如果想让框1，3在2之上的话也需要在框2上设置z-index，而且如果只在框1，3上设置的话无效。大家也可以去试试代码如下在ie7下通过：
<html>
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
span
{
background-color: Red;
width: 30px;
height: 30px;
}
#box_relative
{
position: absolute;
left: 20px;
top: 20px; background-color: gray;
}
</style>
</head>
<body>
<span style="z-index:30"></span><span
id="box_relative"></span><span
style="z-index:30"></span></body>
</html>
参考资料： http://www.jb51.net/css/21615.html,http://blog.csdn.net/cui_angel/article/details/7863749
1. 默认位置
<div id="div1">我是上面的层</div>
<div id="div2">我是下面的层</div>
2. 左右位置布局
<div id="divout" >
<!--必须先写右边的层-->
<div id = "innerRight" style="float:right; width=50%; height=120px">这是右边的层</div>
<div id = "innerleft" style="height=120px;">这是左边的层</div>
</div>
3. 相对位置和绝对位置
你可以参照http://www.okhan.net/article/sort0465/sort0467/info-3169.html上面的例子介绍，以及http://developer.51cto.com/art/201009/225424.htm理论介绍，比较清晰，不再赘述。
有其他问题请追问我。
参考资料： 原版
