HTML中position的介紹

所有的框模型一開始都是按文件中正常的元素流定位，而定位position屬性允許我們改變這些自然的位置。通過利用一些簡單的css規則，position使得設計者可以將html元素精確放置，position屬性確定了每個元素框（box）定位的參考點。

在詳細介紹之前，我們先簡要的說明一下定位的4種方法：

1、靜止定位（static）：這種方法使得所有的元素最終位置都是乙個靜止位置。所以沒有什麼需要特殊說的。

2、絕對定位（absolute）：這種方法允許使用者指定元素的左上角、右下角或者其他的參考點和最近的父元素之間的關係將該元素從正常的文件流中拖出來。當頁面滾動時，元素將保持它們各自的位置不變，隨著頁面一起滾動，就像粘在一起一樣。

3、固定定位（fixed）：這種方法允許元素相對於實際的瀏覽器視窗放置。

4、相對定位（relative）：這方法定義相對於在預設情況下瀏覽器把它放置的位置。這個很難解釋，可喜的是這個方法使用的很少。

靜止定位static

定位的預設值static，不使用定位屬性和使用這個值對頁面沒有什麼效果的。

絕對定位absolute

當乙個元素被絕對定位了，瀏覽器做的第一件事是把它從流中完全移走，接著放置在定位屬性指定的位置上。看看下面的例子：

#sidebar

上面說了被絕對定位的元素從流中間移走了，所以在流中間的任何元素將不會受到影響，看見過**上的小廣告吧，後面的文字不會受其任何的影響，就是這樣的效果！還有這裡介紹的定位是指元素，對！是元素，也就是說你可以使用在任何的元素上（包括內聯元素哦），當然更多的是使用在div上。

那如果我放置兩個絕對定位的元素，誰會被遮擋住呢？這裡需要介紹乙個叫做z-index的屬性，將這個屬性設定的值越大，那個元素就會出現的上面。我們來看看邊上的效果。我們將前面的元素設定z-index:99;

在絕對定位元素內巢狀的元素進行絕對定位會怎麼樣呢？這件事情是要說清楚的，不要說我們沒有告訴你啊，它使用的絕對定位是相對於它的父級位置的，而不是整個頁面的。

注意：個人認為不要使用絕對定位的方式去布局你的**，因為**的內容往往會根據你資料庫內容的多少來顯示，也就是說你不能完全確定**的高度（還有乙個原因不是確定高度是因為寬屏的電腦越來越多了）。而絕對定位以後你將不能應對這樣的變化，比如你不能確定你的頁尾放置在什麼位置上合適。

固定定位fixed

固定定位指定元素的位置和你使用絕對定位基本相同，不過作用不同。它的位置是相對於瀏覽器視窗的，下面的那個div就是的，你滾動一下滑鼠的滾輪看看就清楚了。

#sidebar

注意：position:fixed;這個屬性在ie6裡面居然不相容！現在使用ie6的可不少啊，那總不能就這樣放任不管了吧，我提供了乙個簡單事例，大家可以看看通過css hack是如何解決這個問題的。

這是左側的選單，在標準的瀏覽器中採用固定定位，而非標準的瀏覽器（ie6）中，使用了一些hack，和ie6本身的bug！

enjoy it!（這句英語帥不？）

這個是乙個測試，ie6下position:fixed是不能使用的，但是我們使用一些技巧就能完美修復這個bug！

拖動頁面右邊滾動條，你可以看到，灰色的左選單始終固定，這種現象不止於ie7、firefox，在ie6下也有較為完美的表現~這個是乙個測試，ie6下position:fixed是不能使用的，但是我們使用一些技巧就能完美修復這個bug！

相對定位relative

這個方法使用的很少，可能大家都沒有用過，或者別人使用了也看不出來。先來看看它的工作原理，相對定位的元素仍然是頁面流的一部分，不同於絕對定位和固定定位。但是它在顯現自身的最後一刻叛變了，它離開了自己的崗位，偏移到css指定的位置上，原來的崗位呢？還給他留著呢！

誰逼迫它叛變的？我們使用的position:relative;和瀏覽器就是元凶！大家可以試試看，你指定的傢伙是怎麼叛變的，我就不做這個惡人了。