css網(wǎng)頁(yè)布局教程:絕對(duì)定位和相對(duì)定位。通過(guò)本文你絕對(duì)能理解絕對(duì)定位和相對(duì)定位了，如果你看完本篇文章還不理解絕對(duì)定位和相對(duì)定位的話，我看你就別學(xué)css了！哈哈！

概要：

本文主要描述xhtml中相對(duì)定位和絕對(duì)定位各自的本質(zhì)、用法、區(qū)別和兩者之間的關(guān)系。以及使用css的left、right、top、bottom屬性（偏移屬性）和margin屬性（外邊距）對(duì)定位塊級(jí)元素進(jìn)行布局的方法。(本文的示例，請(qǐng)看這個(gè)附件demo。)

說(shuō)明：

占位空間：元素在文檔流中所占據(jù)的空間。
物理空間：元素本身所占據(jù)的空間。

下面分3種情況分別對(duì)相對(duì)定位和絕對(duì)定位進(jìn)行討論：
1.只使用css第一組屬性布局定位元素的情況
2.只使用css第二組屬性布局定位元素的情況
3.混合使用第一組和第二組屬性的情況

圖1為未定位時(shí)的初始效果，
層級(jí)關(guān)系為：
<div
  <div box1
  <div box2
  <div box3
效果圖：

圖1

一、用相對(duì)定位布局塊級(jí)元素
元素設(shè)置position值： position:relative
此屬性值的設(shè)置，元素沒(méi)有脫離文檔流，還是普通流定位模型的一部分，會(huì)對(duì)文檔流中其它元素布局產(chǎn)生影響。（說(shuō)明：藍(lán)色代表占位空間，紅色代表元素）

1.僅使用left、right、top和bottom屬性布局相對(duì)定位元素的情況
元素原本所占的占位空間仍保留，物理空間偏移。

圖2中，設(shè)置元素的left和top的值，對(duì)box2進(jìn)行布局，可以發(fā)現(xiàn)除了box2偏移之外，其他塊級(jí)元素的位置沒(méi)有被影響，可見(jiàn)box2的占位空間還是存在的。
層級(jí)關(guān)系為：
<div
  <div box1
  <div box2 ——– position:relative ; top:-60px; left:80px;
  <div box3
效果圖：

圖2

2.僅使用margin屬性布局相對(duì)定位元素的情況
用margin-bottom屬性和margin-top屬性設(shè)置負(fù)值可以改變文檔流中所占空間的高度，會(huì)影響文檔流中的其它元素位置。例如：margin-top:負(fù)值; margin-bottom:負(fù)值

圖3中，box1和box2都設(shè)置了元素margin-bottom的值，值等于它們高度的負(fù)值。box1和box2物理空間沒(méi)有改變，占位空間高度為0。box3的margin-bottom值設(shè)置為0，物理空間沒(méi)有改變，占位空間高度不變。再通過(guò)margin-left對(duì)box2和box3設(shè)置左偏移值。
層級(jí)關(guān)系為：
<div
  <div box1 ——– position:relative ; margin-bottom:-102px;
  <div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;
  <div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;
效果圖：

圖3

3.混合使用left、right、top和bottom屬性與margin屬性布局相對(duì)定位元素的情況
此情況，它們的值會(huì)產(chǎn)生累加的效果。在css2.1中所有的瀏覽器都使用外邊距邊界來(lái)完成 偏移計(jì)算。本文從數(shù)學(xué)的角度理解為偏移屬性值和外邊距屬性值累加。

圖4中，box2是在圖3的基礎(chǔ)上增加設(shè)置left的值產(chǎn)生的效果，可見(jiàn)margin-left的值和left的值產(chǎn)生了累加。(偏移量:80px = 110px - 30px)
層級(jí)關(guān)系為：
<div
  <div box1 ——- position:relative ; margin-bottom:-102px;
  <div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px;
  <div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;
效果圖：

圖4

二、用絕對(duì)定位布局塊級(jí)元素
設(shè)置position值：position:absolute;
此屬性值的設(shè)置，元素從文檔流完全刪除。

1.僅使用left、right、top和bottom屬性布局絕對(duì)定位元素的情況
絕對(duì)定位的元素的偏移位置以最近的定位(包括相對(duì)定位和絕對(duì)定位)祖先元素作參照物。如果元素沒(méi)有已定位(包括相對(duì)定位和絕對(duì)定位)的祖先元素，那么它的參照物為最頂級(jí)元素（由于瀏覽器的默認(rèn)參照物不同，物可能是body或 html 元素）。
注意：ie下參照物需設(shè)置寬度或高度bottom和right屬性才可以正確的定位。

設(shè)置元素為絕對(duì)定位元素后，元素的left、 right、top和bottom屬性默認(rèn)值不是0，只是將元素脫離文檔流。以下例子說(shuō)明這個(gè)問(wèn)題。
在圖5中，將橘黃色的祖先元素設(shè)置為定位元素（即參照物），box2設(shè)為絕對(duì)定位，文檔流由box1-box2-box3變?yōu)閎ox1-box3，可box2卻沒(méi)有移動(dòng)到距離參照物0值的位置上，可見(jiàn)box2的left、 right、top和bottom屬性默認(rèn)值不等于0，它只是脫離了文檔流而已。
層級(jí)關(guān)系為：
<div ———————————position:relative 參照物
  <div—————————-沒(méi)有設(shè)置為定位元素，不是參照物
    <div———————-沒(méi)有設(shè)置為定位元素，不是參照物
      <div box1
      <div box2 ——–absolute
      <div box3
效果圖：

圖5

以最近的祖先定位元素為參照物的情況
圖6中，box2設(shè)置成絕對(duì)定位元素，脫離了文檔流，文檔流由box1-box2-box3變?yōu)閎ox1-box3，box2以最近的定位祖先（藍(lán)色框）為參照物。

層級(jí)關(guān)系為：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是參照物
  <div—————————-沒(méi)有設(shè)置為定位元素，不是參照物
    <div———————- position:relative 參照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果圖：

圖6

圖7中，為改變參照物（橘色框）后的效果
層級(jí)關(guān)系為：
<div ——————————— position:relative;最近的祖先定位元素，參照物
  <div—————————-沒(méi)有設(shè)置為定位元素，不是參照物
    <div———————-沒(méi)有設(shè)置為定位元素，不是參照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果圖：

圖7

圖8中，參照物為最頂級(jí)的元素情況。
層級(jí)關(guān)系為：
<div ———————————沒(méi)有設(shè)置為定位元素，不是參照物
  <div—————————-沒(méi)有設(shè)置為定位元素，不是參照物
    <div———————-沒(méi)有設(shè)置為定位元素，不是參照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果圖：

圖8

2.僅使用margin屬性布局絕對(duì)定位元素的情況
此情況，margin-bottom 和margin-right的值不再對(duì)文檔流中的元素產(chǎn)生影響，因?yàn)樵撛匾呀?jīng)脫離了文檔流。另外，不管它的祖先元素有沒(méi)有定位，都是以文檔流中原來(lái)所在的位置上偏移參照物。

圖9中，使用margin屬性布局相對(duì)定位元素。
層級(jí)關(guān)系為：
<div ——————————— position:relative; 不是參照物
  <div—————————-沒(méi)有設(shè)置為定位元素，不是參照物
    <div———————-沒(méi)有設(shè)置為定位元素，不是參照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
      <div box3
效果圖：

圖9

ie6的情況下，box2前面沒(méi)有兄弟節(jié)點(diǎn)，則margin-left的值會(huì)出現(xiàn)雙倍邊距，見(jiàn)圖10。
層級(jí)關(guān)系為：
<div ——————————— position:relative; 不是參照物
  <div—————————-沒(méi)有設(shè)置為定位元素，不是參照物
    <div———————-沒(méi)有設(shè)置為定位元素，不是參照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
      <div box3
效果圖：

圖10

3.混合使用left、right、top和bottom屬性與margin屬性布局相對(duì)定位元素的情況
a.margin屬性和top、bottom、left、right屬性同時(shí)使用，如果同一方向偏移，它們的值會(huì)產(chǎn)生累加的效果，見(jiàn)圖11。

例如：margin-left:120px; left:-20px; 那么box2的偏移值為120px-20px=100px;
層級(jí)關(guān)系為：
<div ———————————-不是參照物
  <div—————————–不是參照物
    <div———————–position:relative; 參照物
      <div box1
      <div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;
      <div box3
效果圖：

圖11

b.絕對(duì)定位和相對(duì)定位的累加加效果不同，如果top、bottom、left、right屬性和margin屬性偏移的方向相反，top、bottom、left、right屬性值有效，反方向的margin屬性值無(wú)效，見(jiàn)圖12。
層級(jí)關(guān)系為：
<div ———————————-不是參照物
  <div—————————–不是參照物
    <div———————–position:relative; 參照物
      <div box1
      <div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
      <div box3
效果圖：

圖12

總結(jié)：

• 相對(duì)定位的元素不會(huì)脫離文檔流，占用文檔流的空間，left; right; top和bottom屬性與margin屬性混合使用會(huì)產(chǎn)生累加效果。
• 絕對(duì)定位的元素脫離文檔流，偏移不影響文檔流中的其它元素，left; right; top和bottom屬性與margin屬性混合使用，偏移方向相同值累加，方向相反，margin屬性值無(wú)效。
• 絕對(duì)定位的元素以最近的定位祖先元素為參照物。