詳解div+css相對定位和絕對定位用法

1.定位的專業解釋：

(1)語法

 

　　position:static|absolute|fixed|relative

 

     從上面語法能夠看出，定位的方法有不少種，它們分別是靜態(static)，絕對定位(absolute)，固定(fixed)，相對定位(relative)。在這個教程裏，我不逐一講，只講最經常使用也是最實用的兩個定位方法：絕對定位(absolute)、相對定位(relative)。

 (2)說明

　　相對定位(relative)：相對定位是一個很是容易掌握的概念。若是對一個元素進行相對定位，它將出如今它所在的位置上。而後，能夠經過設置垂直或水平位置，讓這個元素「相對於」它的起點進行移動。

          若是將 top 設置爲 20px，那麼框將在原位置頂部下面 20 像素的地方。若是left 設置爲 30 像素，那麼會在元素左邊建立 30 像素的空間，也就是將元素向右移動。

 

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

以下圖所示：

注意，在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其它框。

    絕對定位(absolute)：將被賦予此定位方法的對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父級對象進行絕對定位，若是對象的父級沒有設置定位屬性，即仍是遵循HTML定位規則的，則依據body對象左上角做爲參考進行定位。絕對定位對象可層疊，層疊順序可經過z-index屬性控制，z-index值爲無單位的整數，大的在最上面，能夠有負值(目前負值FF不支持)。

      絕對定位使元素的位置與文檔流無關，所以不佔據空間。這一點與相對定位不一樣，相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。

普通流中其它元素的佈局就像絕對定位的元素不存在同樣：

 

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

       絕對定位的元素的位置相對於最近的已定位祖先元素，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

 

2.定位的形象解釋

 

　　我先來架設一個虛擬的 場景：有一個矩形的房間，裏面還有一個水桶裝了些水，水裏還浸泡着一個西瓜，這個房間半空中還有很多的鉤子用於掛東西用。如今我把網頁元素與上面物件對應 上，那麼房間就是一個網頁，水桶是網頁中的一個板塊，桶中的水就是文本流，西瓜就是將要被定位的對象。

 

　　(1)貢獻的絕對定位(absolute)

 

　　對照前面解釋，若是西瓜被賦予絕對定位，那麼就等於把西瓜從水中撈起來掛在半空中的鉤子上，水桶中西瓜原來佔用的空間水會自動填補它(絕對定位對象會讓出本身原先佔用位置，因此說它是貢獻的)。此時若是以前沒有對水桶進行定位設定，那麼被拿起的西瓜位置不會再受水桶位置影響，水桶怎麼移動，西瓜仍是掛在原來位置，至於西瓜要怎放，則以房間左上角(body左上角)爲準，用left，right，top，bottom值來定位。

 

　　可是若是水桶也給出了定位設置(一般是相對定位，下面有講到這一實用技巧)，此時西瓜的擺放就沒有那麼自由了，儘管此時西瓜被拿起來了不會影響水桶中的水(文本流)，但它仍是要聽桶的話，桶會告訴西瓜「你能夠活動，但應該在個人範圍內走動，比方說我要你在我左上方1米處，你就要跟死這一點，我走你也要跟着走」，若是桶中有不少個西瓜，能夠所有拿出來吊到半空中，它們將被安排在不一樣高度的空間(層)，因此在房頂垂直往下看，有可能看到不一樣西瓜層疊在一塊兒的狀況(這個所謂的高度在網頁中是不存在的，就像FLASH動畫中的不一樣層上安排了元素，但它們在看時不會有深度感受)。可見絕對定位的對象參考目標是它的父級，專業稱之爲包含塊。

 

　　(2)自私的相對定位(relative)

 

　　相對定位一個最大特色是：本身經過定位跑開了還佔用着原來的位置，不會讓給他周圍的諸如文本流之類的對象。相對定位也比較獨立，作什麼事它本身說了算，要定位的時候，它是以本身自己所在位置偏移的(相對對象自己偏移)。再拿前邊做好比來解，那麼此時西瓜彷佛是有魔法的，若是西瓜經過相對定位在水桶中偏移了你會看到一個現實生活中不存在的現象：水中有一個地方水凹下去了，周圍的水不能填補它，西瓜看起來在旁邊，若是攪動一下桶中的水，那個凹的位置會發現改變(文本流對相對定位對象還存在影響)，可是凹處到西瓜出現的距離始終保持一致。可見文本流與它之間還會互相影響，由於對象並無真正脫離文本流，就像有兩我的在同一層樓水平移動的過程當中會有碰頭的機會。

 

　　(3)總結兩種定位的特徵

 

　　絕對定位就像是把不一樣對象安排到了一棟高樓的不一樣樓層(通常指不是第一層，咱們這裏理解爲文本流就放在首層)，它們互不影響，可是它們怎麼移動與你樓的地基和麪積(父級)有關。相對定位指對象仍是在首層樓與文本流一塊兒存放，它們之間確定存在影響。

 

　　(4)對特殊狀況的補充

 

　　在用相對定位和絕對定 位的時候，有一種狀況是它們的定位值用到了負值則對象可沿相反方向移動，剛纔說到的把對象安排在一棟樓的不一樣層，若是某個對象一開始就是背靠着最外邊牆 的，此時再用一個負值定位它，它就會神奇般地跑出牆外去了，固然現實中可沒有這種驚險而又神奇的事發生，本人只爲了延用上面的好比做形象解釋。