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： 這個我就不囉嗦了，就是根據瀏覽器窗口定位的，常常會是那種不關掉一直在的討人厭的廣告吧...