position : static | absolute | fixed | relative
取值：
static : 默认值。无特殊定位，对象遵循HTML定位规则；
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义；
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范；
relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置；
Left : 检索或设置对象与其最近一个具有定位设置的父对象左边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
Right : 检索或设置对象与其最近一个具有定位设置的父对象右边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
Top : 检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
Bottom : 检索或设置对象与其最近一个具有定位设置的父对象底边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
Absolute:
在Absolute的官方解释语中出现了2个专业用语，一个是文本流，一个是父对象，很明显，要想理解absolutely的定义就必须得了解文本流和父对象的含义。
文本流 :一系列字符，可以由多行构成，每行由一个换行符终止。在HTML中字符也就是html文档显示的元素（文字，图片，视频等），可将文本流抽象理解为整个html页面元素的排版方式。
父对象（也称父级对象） : 在Css官方语言中并未明确给出父对象到底是个什么概念，说得比较笼统，形象的也就是当B嵌套在A中时，A就是父级对象，B就是子级对象，就好像是A把B生出来的一样。
<div id=”A”>
现在我们再回过头来看Absolute。在CSS中，它的写法是： position: absolute; 他的意思是绝对定位，那到底怎么来理解“绝对”这两个字呢？我们先来看两个例子：
1.
创建一个html文档，定义一个div，并为它写下以下属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#test1 {
position:absolute;
width:200px;
height:200px;
border:10px solid #000000;
background-color:#990000;}
</style>
</head>
<body>
<div id="test1"></div>
</body>
</html>
（图片1）
很明显在没有任何其他元素干扰下他是参照html页面默认的margin处开始定位的（非浏览器的左上角，浏览器的左上角再Address的A处），也就是body。那么我们怎么配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)来进行定位呢？
我们继续为叫做text1的div进行以下定义：
#test1 {
}
（图片2）
如果设定TRBL并且没有父级或父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
margin:0;
color:#FFFFFF;}
#test0 {
width:270px;
height:50px;
background-color:#795B7D;}
#test1 {
position:absolute;
width:200px;
height:200px;
border:10px solid #000000;
background-color:#990000;
top:50px;
left:50px;}
#test2 {
position:absolute;
border:10px solid #BFA800;
width:100px;
height:100px;
background-color:#000066;}
</style>
</head>
<body>
<div id="test0">我是默认定位，没有margin/padding/border不受定位影响</div>
<div id="test1">
<div id="test2">我是子对象，大家注意看我的位置变化</div></div>
</body>
</html>
（图片3）
在这个例子中大家可以很明显的看出父级对象是个什么意思了吧！说得更直观一点，父子对象关系就是当B嵌套在A中时，A就是父级对象，B就是子级对象，就好像是A把B生出来的一样。
那我们来看看当为名叫test2的子对象加上了TRBL是，它的移动和没有父对象的时候是否一样呢？
我们为test2定义如下：
#test2 {
}
(图片4)
通过这2个例子，我们完全可以很好的理解绝对定位absolute的意思，总结可以说为：
它是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定有TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
明白了之后相信大家可以理解为什么行家们多说“网页居中的话用Absolute就容易出错”这句话了吧？！因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会因为分辨率的变化而变化位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
#test0 {
#test1 {
#test2 {
</style>
</head>
<body>
<div id="test1">
</div>
<div id="test0">我是参考div，没有margin/padding/border不受定位影响</div>
</body>
</html>
（图片5）
（图片6）
#test1 {
}
top:150px;
}
（图片7）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
#test1 {
#test2 {
</style>
</head>
<body>
<div id="test1">
</div>
</body>
</html>
Fixed:
