css中那些我没有弄清楚的定位position

    position的值究竟是几个呢？我想应该是4个吧
    static：默认值，静态；
    relative：相对定位；
    absolute：绝对定位；
    fixed：这个是固定的意思。

好吧...战役才刚刚开始...

<div class="parent">
  <div class="sub1"></div>
  <div class="sub2"></div>
</div>

.parent{
		border:5px solid #fff000;/*注意：父div的border是5px*/
	}
	.sub1{
		border:3px solid #a02;/*border是3px*/
		background: #fff;
		color: #555;
		height:100px;
		width: 100px;
	}
	.sub2{
		border:3px solid #3b45a0;/*border是3px*/
		background: #fff;
		height:100px;
		width: 100px;
	}

这个是原始的样子

以前的都是准备 开始吧 亲~~~

1. static
    这个是默认样式，很少说..就是上图的样子了
2. relative
    这个是相对定位，她其实呢和static的差异不大，都是文档流..若是不设定她的top,right,left,bottom，她仍是原来的样子。她的相对在于，她会根据这4个值‘偏移’，她让人不解的就是究竟是怎么’偏移‘的呢？
   个人理解是 这个偏移是相对于同级relative或者static的元素margin结束的地方
   我如今 将 sub1的 margin-bottom:10px;，将 sub2 的 position：relative; top:10px; 就变成下图的样子了
   
   好吧 你可能也会问 top和margin-top 有嘛区别？ 区别啊？ 注意到图片下方了么 sub2相对父div冒出来了呢
   这冒出来的10px就是top的关系...（缘由是margin会看作盒模型的一部分 而定位的top值是根据文档流偏移的位置是不会把父元素撑开的.....）盒模型详见http://my.oschina.net/u/582995/blog/98169
   不过relative还有一个其余的用处，是我常常用的。就是当她的子元素要根据他绝对定位的时候。这就要讲到绝对定位absolute了
   
   
3. absolute：
    这多是让不少人误会的家伙....你以为一个元素absolute以后是根据谁来定位的呢？body？窗口？no...
   分两种状况：
    一, 是这个absolute的对象的parent（或者是父级的父级，往上类推）position有为relative或者absolute时，此对象会根据这个parent定位；
     (注意：有多个parent都有定位的，是根据最亲最近的parent哦)
    二, 是没有这样一个父亲的时候，好吧 根据body，浏览器窗口定位！
   
   
4. fixed： 这个我就不啰嗦了，就是根据浏览器窗口定位的，常常会是那种不关掉一直在的讨人厌的广告吧...