<div id="parent">
<div id="sub1">sub1</div>
<div id="sub2">sub2</div>
</div>
1. Relative:相对定位是"相对于"元素在文档流中初始位置进行偏移. 当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移.
sub2的位置是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。
2. Absolute
(1)当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，此时sub1按照这个parent来进行定位。
(2)如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位
如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位
sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，此时sub2将获得sub1的位置，它的文档流不再基于 sub1，
而是直接从parent开始。
2. fixed
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。
4. static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。
5. 布局：
http://www.qianduan.net/css-position.html1. position:relative + position:absolute
如果给div-1设置relative定位，那么div-1内的所有元素都会相对于div-1定位，如果给div-1a设置absolute定位，就可以把div-1a移动到div-1的右上方
2. 两栏绝对定位
#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }
3. 两栏绝对定位定高
4. 浮动
我们可以浮动一个元素，使它移动到左边/右边，并且是文本环绕着它。这主要用于图像，但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)
#div-1a { float:left; width:200px; }
下面是一个例子
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .main{ position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } .left{ position: absolute; top: 0; left: 0; right: 0; bottom: 42px; width: 270px; } .right{ position: absolute; top: 0; left: 270px; right: 0; bottom: 42px; border-left: 1px solid #cccccc; overflow-y:auto; } .foot{ position: absolute; bottom: 0; right: 0; left: 0; height: 31px; border-top: 1px solid #cccccc; } .title{ padding: 10px 10px 0 10px; width: 250px; overflow: hidden; text-overflow: ellipsis; } .titleContent{ overflow-y: auto; overflow-x: hidden; position: absolute; top: 40px; bottom: 0; width: 270px; } </style> <title></title> </head> <body> <div class="main"> <div class="left"> <div class='title' style='background-color:red;'> 444444444444444444444444555555555555555555555555555555555 </div> <div class='titleContent' style='background-color:green;'> 444444444444444444444444444444444444444444444<br> left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br> left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br> left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br> left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br> </div> </div> <div class="right" style='background-color:blue;'> <div> right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br> right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br> right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br> right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br> right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br> </div> </div> <div class="foot" style='background-color:grey;'></div> </div> </body> </html>