<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>absolute样式</title>
<style type="text/css">
#ab{
position:absolute;
}
#abc{
position:absolute;
left:20px;
}
#abcd{
position:absolute;
left:100px;
}
</style>
</head>
<body>
<div id="ab">son</div>
<div id="abc">father</div>
<div id="abcd">grandfather</div>
</body>
</html>
为什么这三个<div>显示在同一行上？
2016-04-07
我们先来看一下绝对定位的含义：
层模型--绝对定位
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
你设置这三个div没有设定一个具有定位属性的父元素，所以，他们就默认的是body元素，即浏览器窗口。
你设置了如下的css样式
#ab{
position:absolute;
}
#abc{
position:absolute;
left:20px;
}
#abcd{
position:absolute;
left:100px;
}
那么显示的结果就是三个元素都会在一行，原因很简单，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。就是说abc这个div会向右移动20px abcd会向右移动100px,但是同时绝对定位使元素的位置与文档流无关，因此不占据空间，所以三个div还是会显示在同一行。
相对定位：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
.relative{ position: relative; background:purple; width:50px; height: 50px; left: 80px; }
这个框会出现在跟原来的位置向右80px的地方，原来的位置为空，
如果position: relative改成position: absolute,
则这个框的原来空间会被下面的框所覆盖。
经对定位：绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
.box{ width:300px; height: 300px; margin: 0 auto; border: 1px solid orange; position: relative; }
.relative{ position:absolute; background:purple; width:50px; height: 50px; left: 80px;}
box是relative的父元素，标识为relative 的框会出现在向右 80px的地方，
但是如果父元素box没有定位属性，它则会相对body进行定位，位置会大变，会脱离box框。
举报
