CSS的定位：position

為什麼要使用定位：

          使盒子可以在螢幕任何位置上動

定位分類：

                       定位主要包括定位模式和邊偏移兩部分，邊偏移是告訴盒子該往哪邊走（上下左右），定位模式是告訴盒子採用什                         麼樣的定位方式，相對 絕對 靜態 固定等。

定位模式：

• 靜態定位的唯一用處是用來取消定位；
• 相對定位是以自己的左上角為基準來移動，移動的大小就是自己設定的邊偏移,但是原來的所佔的位置是繼續佔有的，也就是如果有其他的盒子，其他的盒子的位置是不會變的，還是按照該移動的盒子之前存在的時候來佈局放置的。
• 絕對定位是不佔位置的,該盒子設定了絕對定位,則原來存在的位置不存在了,所以下面的盒子就跑到上面去了，設定絕對定位的盒子的邊偏移的移動是以瀏覽器的當前螢幕為基準對齊的，絕對定位中：父親沒有定位,兒子有定位,則兒子的定位會以當前的螢幕為基準來定位，可能會跑出父親的範圍,按照定位的方式走；父親有定位,兒子有定位,則兒子的定位會以父親的左上角為基準來定位，按照定位的方式走； 總結起來：絕對定位中，定位的兒子元素依據已經定位的（絕對，固定和相對定位）的父元素（祖先）進行定位。

自絕父相：複雜的專案中經常用來定位元素

例如做一個冰淇淋廣告的部分，將三張圖拍案組合成一張圖片，程式碼如下：

<style type="text/css">
			div{
				width: 310px;
				height: 190px;
				border: 1px solid #ccc;
				margin: 100px auto;
				padding: 10px;
				position: relative;
			}
			.top{
				position: absolute;
				top: 0;
				left: 0;
			}
			.bottom{
				position: absolute;
				right: 0;
				bottom: 0;
			}
</style>

<div>
   <!--前兩張圖片分別是圖中的左上角和右下角的小圖-->
   <img src="img/top_tu.gif" class="top"/> 
   <img src="img/br.gif" class="bottom"/>
   <img src="img/adv.jpg" alt="" class="main"/>
</div>

效果如下圖：