见到网上有解析 absolute与relative 力帖子，感觉说的不够明白，自己再整理一下。
1:
如果position的父级(紧挨着的级)或祖父级...没有出现position的话，就以浏览器的左上角为为参照点
2:
absolute只以，最近的父级 ，有position定义 的，div块的左上角 ，为参照点
relative只以，最近的父级 ，不管有无position定义的，div块的正文左上角 ,（即当该div没有positon时的位置 ）为参照点
3:
同一级别的div，由于TLBR取值不同，会出现层叠现象，加上z-index就可以调整显示的
顺序值大的在最上层（注意z-index 是会继承的 ，在一个z-index很小的父级中，是先按父级的z-index来处理的）
ps: 当某个div以absolute 定义了，一定要写好top 和 left 属性，ff和ie默认的情况是不一样的 。
给出一段代码，大家可以试一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS--Position</title>
<style>
#box1{
/*position:relative;*//*由于父级没有position定义，box1就以页面的左上角为参照点*/
width:200px;
height:100px;
background-color: #00cc00;
padding:10px;
top:50px;
left:100px;
}
#box{
position:relative;/*由于父级没有position定义，box1就以页面的左上角为参照点*/
width:200px;
height:100px;
background-color: #00cc00;
padding:10px;
top:50px;
left:100px;
}
#boxb{
position:relative;/*由于父级没有position定义，box1就以页面的左上角为参照点*/
width:400px;
height:200px;
background-color: #00cc00;
padding:10px;
top:50px;
left:100px;
}
#first{
position:absolute;/*相对于最近的，有position定义的，父级元素box1的，左顶点，为参照点*/
top:0px;
left:0px;
width:120px;
background-color: #00CCFF;
}
#second{
position:relative;/*本对于紧挨着的，父级(box1)的，正文(box有padding定义)的，左顶点，为参照点*/
top:10px;
left:10px;
width:120px;
background-color: #FFFF66;
}
</style>
</head>
<body>
<div id="box">Box正文
</div>
<div id="boxb">
<div id="box1">Box正文
<div id="first">First</div>
<div id="second">Second</div>
</div>
</div>
</body>
</html>
1553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
