(由于position是相对于其包含块定义，先看以前写的：http://www.cnblogs.com/youxin/p/3341305.html）
Learn CSS Positioning in Ten Steps http://www.barelyfitz.com/screencast/html-training/css/positioning/
<div id="example"> <div id="div-before"> <p>id = div-before</p> </div> <div id="div-1"> <div id="div-1-padding"> <p>id = div-1</p> <div id="div-1a"> <p>id = div-1a</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p> </div> <div id="div-1b"> <p>id = div-1b</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p> </div> <div id="div-1c"><p>id = div-1c</p>
</div> </div></div><!-- /id=div-1-padding /id=div-1 --> <div id="div-after"> <p>id = div-after</p> </div> </div><!-- /id=example -->
1. position:static
所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。
一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。
2. position:relative
如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】
It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.
3. position:absolute
当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。
4. position:relative + position:absolute
如果我们给 div-1 设置 relative 定位，那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位，就可以把 div-1a 移动到 div-1 的右上方。
5. 两栏绝对定位
现在就可以使用相对定位和绝对定位来做一个两栏布局了。
#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }
6. 两栏绝对定位定高
一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合，因为一般我们不知道元素中会有多少文本，或者将要使用的精确的字号。
7. 浮动
对于可变高度的列来说，绝对定位就不起作用了，以下是另外一个方案。
我们可以浮动一个元素，使它移动到左边/右边，并且是文本环绕着它。这主要用于图像，但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)。
#div-1a { float:left; width:200px; }
8. 浮动列
如果我们把一个元素向左浮动，并且把第二个元素也向左浮动，they will push up against each other。
#div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; }
9. 清除浮动列
在浮动元素之后，我们可以清除浮动来使其他元素正确定位。
#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }
来自：
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.qianduan.net/css-position.html
http://www.haozi.cn/code/position-static-relative-absolute-float/
<css 权威指南》position：
填充一个包含块右下角时要使用以下值:
top:50%;
left:50%；
<style> #div1{ width:400px; height:400px; position:relative; border:1px solid red; } #div2{ width:200px; height:200px; background-color:green; position:absolute; top:50%; right:50%; } </style> </head> <body> <div id="div1"> <div id="div2"> div2 </div> </div> </body>
显示：
如果把Left:50%改成right:50%也是一样。
如果right为-50%,则绿色框在红框右边。
高度和宽度
设置高度和宽度
如果想为定位元素指定一个特定的高度，显然要用width和height属性。尽管有时设置一个元素的高度和宽度很重要，但对于
定位元素来说则不一定必要。例如，如果使用top,right,bottom,left来描述4个边的位置放置，那么元素的widht和height将由
这些偏移隐含确定。假设你希望一个绝对position:absolute定位元素从上到下填充其包含块的左半部分，可以使用以下值，
top:0;bottom:0;left:0;right:50%;
由于width和height都是默认值auto，上面的就好像使用了以下值一样：
top:0;bottom:0;left:0;right:50%;50%;height:100%;
#div2{
200px;
height:200px;
background-color:green;
position:absolute;
top:0;
right:50%;
50%;
height:100%;
}
可以看到，更top:0;bottom:0;left:0;right:50%; 效果一样。
当然，倘若向元素增加了margin,border或padding，此时如果为height和width显示指定值，情况就不同了。
这会使定位元素超出其包含块。
#div2{
200px;
height:200px;
background-color:green;
position:absolute;
top:0;
right:50%;
50%;
height:100%;
padding:2em;
}
显示：
之所以会发生这种情况，原因在于向内容区增加了内边距，而且内容区的大小由width和height确定，要得到你想要的内边距，
而且仍保证元素不超出其包含块，可以去除height和width或设置为auto。
不显示设置width和height，
#div2{
200px;
height:200px;
background-color:green;
position:absolute;
top:0;
right:50%;
padding:2em;
}
显示如下：
。
限制宽度和高度
min-width min-heigth
max-width max-height;
以下样式要求定位元素至少10em width，20emheight，
top:10%;bottom:20%;left:50%;right:10%;min-10em;min-height:20em;
这个解决方案不是很健壮，因为他要求元素至少是某个特定的大小，而不论其包含块由多大，下面是一个更好的解决方案：
top:10%;bottom:auto;
left:50%;right:10%;
heigth:auto; min-15em;
在此，元素宽度应该是包含块的40%，不过不能小于15em,在此还改变了bottom和height，使之自动确定，这样元素就会足够
高（足以显示其内容），而不论他会多狭窄（当然不能小于15em）。
还可以换个角度，通过使用max-width,max-height使得元素不至于太高或太宽。下面考虑这样一种情况，
出于某种原因，希望一个元素的宽度是其包含块的3/4，不过，如果达到400px就不能更宽了，以下是一个合适的样式：
left:0%; right:auto; 75%; max-400px;
需要指出，这些max，min属性结合float元素使用时可能非常有用。例如，可以允许一个float元素宽度相对于父元素的宽度，同时确保该元素的宽度不小于10em，反过来也是可以的:
p.aside{ float:left; 40em; max-40%;}
这会把浮动元素设置为40em，除非这超过了包含块宽度的40%，在这种情况下浮动元素会变窄。