1、简介
position有五个属性： static | relative | absolute | fixed | inherit
static 和 inherit : 没什么值得介绍的。
relative : 相对于元素自身的定位。
absolute ：相对于包含块的定位。
fixed : 相对于窗口的定位。
2、包含块
包含块就是 top | right | bottom | left 参考的元素。
absolute的包含块指的是：该元素最近的具有定位设置的父元素，
举个例子：
对于span元素来讲，它的包含块是#outer，而不是#inner,因为#outer设置了 position:absolute。注意的是，只要#outer设置了 absolute | relative | fixed span元素的“定位
父元素”就是#outer，如果outer没有设置三种属性的其中之一，则span的包含块就是html元素。relative的包含块指的是：元素自身。
3、top | right | bottom | left 的细节。
在此以left为例：
left值 = “定位父元素”border内边 到 该元素margin外边的举例 ，简单的记忆就是“border内,margin外”。
right | bottom | left 也是这种道理
4、z-index
关于z-index的细节，这里就不说了，因为觉得自己表达不清，而且《CSS权威指南》相应章节里对z-index讲的非常清楚(特别是叠放上下文的相关知识)，这些知识是非常有用的。
5、postion 与文档流
只要元素设置了 postion : absolute | relative | fixed ， 该元素就会脱离文档流。
但是relative元素是个特例，因为该元素虽然脱离了文档流，但是它原本所占的空间仍然占据文档流。
例如：
<!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=utf-8" />
<title>relative</title>
<style type="text/css">
* { margin:0; padding:0;}
body { padding:50px; background-color:#FFFFCC;}
span{
position:relative;
left:50px;
top:40px;
background-color:#FF9900;
}
</style>
</head>
<body>
<p> rain-man rain-man rain-man rain-man rain-man <br />
rain-man rain-man <span>cnblog</span> rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br /></p>
</body>
</html>
6、positon 与 display
元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位
7、position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。