細解CSS中的定位技術

CSS中的元素定位問題長久以來一直是困擾網頁設計者的一大難題，而且有關CSS講解的書中關於這方面的講解也確實很不給力，帶有一種朦朧感，其中有些作者甚至在講解中漏洞百出，瀏覽器根本不按照作者的講解方式進行定位。所以，我覺得很有必要在這方面進行詳細的解說。根據我對有關CSS書籍的研究，再加上對網上許多資料的查詢，以及親自編碼瀏覽驗證，我對CSS的總結如下，希望對網頁設計初學者的學習能帶來一些幫助。鑑於筆者水平有限，不妥之處在所難免，懇請廣大讀者給予批評指正。若觀點有待商榷，可發郵件至yelbosh@foxmail.com.

引言：（本文均以大眾瀏覽器IE8.0為標準，若其瀏覽效果與Chrome或firefox不同，則筆者一定會特意宣告，否則為效果相同）

CSS中的定位技術簡概：

static ，CSS中的寫法是：position: static，靜態，無特殊定位。此時容器按照普通佈局在頁面上顯示，各個定位座標並不對它產生作用。該屬性是瀏覽器的預設屬性。

Relative，CSS中的寫法是：position:relative; 他的意思是相對定位，物件不可層疊，但將依據left，right，top，bottom等屬性在正常文件流中偏移位置 ，該屬性值表示容器仍然是普通佈局，但是計算定位的時候，按照它應該所在的位置（即佔位空間的原始點）進行定量偏移後顯示。他是參照父級的原始點為原始點進行文件流整理，無父級則以BODY的原始點為原始點。

小貼士：佔位空間：元素在文件流中所佔據的空間。
物理空間：元素本身所佔據的空間。

absolute : CSS中的寫法是：position: absolute ，絕對，將物件從文件流中拖出，通過width、height、left，right，top，bottom等屬性與margin、padding、border進行絕對定位，絕對定位的元素可以有邊界，但這些邊界不壓縮。而其層疊通過z-index屬性定義（通過透明層的建立可以更深刻理解）。絕對定位的元素拋開了文件排列布局，相當於遊離於文件頁面之上，所以元素會相互覆蓋。元素覆蓋的規則是根據各自程式碼出現的先後順序決定的（z-index這個屬性可以改變這樣的覆蓋順序）。

小貼士：top和left用來定義元素的座標。Top表示元素相對於基準點在豎直方向的偏移量，正值表示向下偏移，負值表示向上偏移。同理，left表示元素相對於基準點在水平方向的偏移量，正值表示向右偏移，負值表示向左偏移。絕對定位與相對定位裡這兩個屬性不同的地方在於基準點的選取。

fixed : CSS中的寫法是：position ：fixed，懸浮，使元素固定在螢幕的某個位置，其包含塊是可視區域本身，因此它不隨滾動條的滾動而滾動。（IE5.5+不支援此屬性，所以此屬性並不常用） 

詳解：

一、下面我們可以看一個瀏覽器預設定位方式static的原始碼及其效果。

原始碼：圖一

效果圖：圖二

很明顯，瀏覽器顯示的效果為普通的文件流，如果此時對div層使用top或left等定位屬性，屬性值對其並不起作用。

二、使用left、right、top和bottom屬性佈局相對定位元素的原始碼及其效果圖：

原始碼：圖三

效果圖：圖四

由此可以看出，綠色塊部分使用了相對定位，其佔位空間不變，物理空間也沒有變（沒有進行設定），而且由於top和left的作用，其相對於文件流中應該所在的位置進行了定量的偏移。Top值為180px，表示該塊向下偏移了180px，left的值為120px，表示該塊向右偏移了120px。綠塊的佔位空間仍然存在，表示該塊並沒有脫離文件流。思考：如果值為負情況如何呢？顯然~

再思考：

既然擁有佔位空間，那麼有沒有什麼辦法可以改變相對定位元素在文件流中的佔位空間的位置呢？答案是顯然的~我們可以使用margin屬性來改變佔位空間的位置

小貼士：margin屬性在css中的意義是容器邊距，它的值表示的是邊距的寬度。大多數人便覺得它是一個絕對概念，表示的就是元素到容器邊框的寬度。但是margin這個單詞到底是什麼意思呢？筆者查了一下google詞典，解釋如下：margin   /ˈmɑːdʒɪn/ DJ   /ˈmɑːrdʒən/ DJ US   /'mɑrdʒən/ KK US the amount of time, or number of votes, etc. by which somebody wins something （獲勝者在時間或票數上領先的）幅度，差額，差數 countable usually singular 由此可見，margin是有相對意義的。所以，在這裡，margin-top表示佔位空間相對於原來位置在豎直方向的偏移量，正值表示向下偏移，負值表示向上偏移。同理，margine-left表示佔位空間相對於原來位置在水平方向的偏移量，正值表示向右偏移，負值表示向左偏移。<同top與left>

其中該效果的原始碼及其效果圖如下圖所示：

原始碼：圖五

效果圖：圖六

由此我們可以看出，綠塊的佔位空間移到了上面緊靠紅色塊的位置，此時，綠塊的佔位空間的位置（即文件流中的位置）的改變，也影響了下面元素的文件流位置的改變，如圖所示，藍色塊的文件流位置也上移了。文件流是從上而下依次排列的。

再再思考：（不要煩哥，哥只是個傳說）

如果以上兩種方法混合使用，可不可以累加呢？！

答案是顯然的~（讀者不妨親自試一下，這個思考題就留個懸念吧，哈哈哈哈哈哈）

不過話又說回來，除非哪個人實在閒著沒事幹了，我想他才會把這兩種方法混著用。

筆者覺得混著用肯定不是編排網頁能用的最好的方法，因為移來移去，so 麻煩！不如直接定下來。

三、這次我們來研究定位中的難點：絕對定位

為什麼說它是難點呢？因為，其實很多書中並沒有把這個問題真正講清楚~

絕對定位的元素以   最近的   定位祖先元素   為參照物。

絕對定位的元素的偏移位置以最近的定位(包括相對定位和絕對定位)祖先元素作參照物。如果元素沒有已定位(包括相對定位和絕對定位)的祖先元素，那麼它的參照物為最頂級元素（由於瀏覽器的預設參照物不同，物可能是BODY或 HTML 元素）。

關於絕對定位的效果的原始碼及其效果圖：

提示：為了更好的演示該效果，我使用了透明層，並且改變了其中某些塊的物理空間，以此來突顯絕對定位的效果。

原始碼：圖七

效果圖：圖八

如圖可以得出，本來的文件流應該為紅--透明層—藍，結果當透明層的定位方式被設為absolute後，其便被從文件流中抽出，所以透明層便脫離了文件流，於是藍色塊在文件流中的位置便也改變了，上移到了紅色塊的下面。但是！大家應該在這裡產生疑問！透明層為什麼偏偏出現在紅色塊的下面呢？！

為了搞明白這個問題，我們先來看一下絕對定位中的基準點（即參照物）的選取問題：

總的規則便是：絕對定位的元素以最近的定位祖先元素為參照物

何為最近？何為定位？筆者在上面已經講的很清楚了，還有當沒有滿足以上條件的情況出現時，我們還給出了相應的解答，即按照瀏覽器預設的參照物進行定位。

細解如下：

如圖所示的效果：圖九

以最近的祖先定位元素為參照物的情況，上圖中，Box2設定成絕對定位元素，脫離了文件流，文件流由box1-box2-box3變為box1-box3，box2以最近的定位祖先（藍色框）為參照物。
層級關係為：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是參照物
  <div—————————-沒有設定為定位元素，不是參照物
    <div———————- position:relative 參照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3>

此為情況一；如下圖所示效果圖：

圖十

層級關係為：
<div ——————————— position:relative;最近的祖先定位元素，參照物
  <div—————————-沒有設定為定位元素，不是參照物
    <div———————-沒有設定為定位元素，不是參照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3>

此為情況二。還有最後一種特殊的情況：

如下圖所示：圖十一

參照物為最頂級的元素情況時，
層級關係為：
<div ———————————沒有設定為定位元素，不是參照物
  <div—————————-沒有設定為定位元素，不是參照物
    <div———————-沒有設定為定位元素，不是參照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3>

一般來講，此時的參考點是body的左上角。

我想當讀者讀到這裡，應該差不多摸得著頭腦了吧？？對，只有當使用top或left這些定位屬性的時候，我們才有必要去尋找參考點與參照物，因為我們會設定偏移量。但是像上面的透明層的例子中，我們沒有用到top或left或者其他的定位屬性，但是透明層便直接顯示在紅色塊的下面，何也？

 

 

其實這是一個非常簡單的問題，大部分讀者想必現在已經歸納了一個結論，恩，沒錯，就是這樣的。我想你想的跟我是一樣的，大膽說出你的歸納，不會錯的。這樣學習，才是真正的學習。Use your head！

 

扯遠了，話說回來，這個結論是什麼呢？正是這一點，許多書上沒有講清楚，致使我在設計網頁的時候困惑很大。其實很簡單，歸根結底，問題出在這：（下一行，見證奇蹟的時刻）

 

 

設定元素為絕對定位元素後，元素的Left、 Right、Top和Bottom屬性預設值不是0，只是將元素脫離文件流！

對，問題就在這裡！元素的預設位置不是（0，0）！那究竟在哪呢？

我想大家現在也心知肚明瞭吧，絕對定位只是將文件脫離文件流，相當於把它在z軸方向上平移了一個單位，z軸的位置變了，但是x軸y軸的位置是不變的，所以，元素的預設位置就是元素在文件流中的位置！只不過其後面的元素向上平移了！

 

 

Margine屬性也可以作用於絕對定位的元素，和相對定位的意義是一樣的，它表示的是偏移的量，大家可以參照一下上面的講解，然後自己動手試一下。筆者在此不再贅述。

 

希望以上講解可以為你的定位學習帶來些許幫助。

                                                

 

 

                                                                                                                       鴨脖先生

                                                                                           2011年2月20日凌晨一點

                                                        <buyaoxueouaoye>

               連線推薦：http://ceeji.net，大家可以參照一下該站住手寫的網頁原始碼，複習一下定位技術。

由於日誌中無法貼上截圖，十分遺憾，所以，感興趣的讀者可以到我郵箱裡索要截圖以便理解。郵箱地址見上。