一、relative屬性的形象化思維
relative是個看上去低調，有些特殊才能，氣場強大，有着不俗身世，但無形中會影響他人的凡人。
二、故事繼續
系列一中講了浮動和絕對定位兩位魔鬼兄弟之間的感人故事，那相對定位和絕對定位之間又有怎樣的故事呢？//zxx:對微小說沒有興趣的可以直接跳到下一段
話說那個CSS即将開啟的時代，浮動和絕對定位的父親“浮絕大魔王”因為過于強大，有礙和諧，于是其他神界屬性組成史上最強聯軍，一起對付“浮絕大魔王”。這一戰打了整整三年之久，一直難分勝負。直至聯軍利用天地巨雷襲擊“浮絕大魔王”之子“浮動”讓其分心，“浮絕大魔王”才不小心遭受緻命重創，逐漸處于下風，形式開始急轉直下。最後關頭，“浮絕大魔王”不得已，用盡自己尾獸級的功力使出玉石俱焚的一招——萬象歸宗，刹那間，天空一片閃耀，強光之下的終神神力開始漸漸褪去，最後紛紛隕落人間，都凡人化了。而“浮絕大魔王”因為重傷在身，且功力耗盡，如果自己直接凡人化，必定死路一條，于是，自己在發招結束前的一瞬間使用了心像瞬移，将自己的靈魂自己的跟瞬移到一個剛出身的嬰兒身上。而這個嬰兒出身之後的名字就是“相對定位”。
後來這個嬰兒漸漸長大，發現了自身有很多特殊的技能（繼承自“浮絕大魔王”，但是卻沒有任何“浮絕大魔王”的記憶），但是，由于自己成長于一個相當樸實的家庭，是以，其平時可以相當低調的，與普通凡人幾乎沒有任何差異。
三、relative屬性的特殊才能
畢竟relative的前世是“浮絕大魔王”，是以其與absolute有很多類似但又不完全一樣的技能。
1. 幻影瞬移
absolute屬性也有瞬移技能，不同之處在于：absolute屬性以天空或其他外界限制計算瞬移位置；而relative屬性由于是凡人肉體，偏移能力有限，隻能通過自身所在位置計算瞬移位置。且relative屬性的這種瞬間移動之際實際上是一種障眼法，其真身依舊在原來的位置上，您所看到了其身體的移動不過是幻影而已。是以，relative屬性的這種技能被世人稱為“幻影瞬移”。
例如下面這個例子：
您可以狠狠地點選這裡：relative屬性幻影瞬移技能demo
position:relative
屬性聲明，當我們點選圖檔下面的按鈕時候，會發現第二張圖檔發生了“瞬移”，雖然圖檔發生了移動，但是其位置卻依舊保留着。
visibility:hidden
的家夥的天生技能，不過
position:relative
是瞬移，
visibility:hidden
則是隐身。 2. 縱雲梯
position:relative
雖是凡夫肉體，但是卻有隻有神魔才有的“縱雲梯”技能，亦稱“垂直升空”的本事。借助
z-index
這把禦劍，就能直接騰空9萬裡，越于其他凡人之上。且其縱雲梯的技能和純魔鬼血統的
position:absolute
的技能是平起平坐的。如果兩者縱雲梯的高度一緻（
z-index
值一樣），誰後發制人誰就是上面顯示。 3. 限魔大法
可能相對定位的前世是絕對定位父親的關系，
position:relative天生可以限制position:absolute在left/top翅膀下瞬間移動的能力。
好像是如來的大手掌限制了孫猴子的筋鬥雲一樣。
四、霸氣外露的relative屬性
雖然relative屬性值外表看上去就像個普通人一樣，但是，由于其自身非常強大的本領，是以其内在的氣場非常強大，可謂霸氣外露。
z-index
采能實作任意高度的縱雲梯，但是，實際上，即使沒有
z-index
這把禦劍，在凡人之中，其縱雲之氣已經完全震懾周圍。例如，凡人标簽在margin負值下，後者會覆寫前者，如下圖所示：
position:relative
，其霸氣就會外露出來，立馬顯示在其他元素之上。如下圖所示：
您可以狠狠地點選這裡：relative霸氣外露demo
relative
屬性值的外露的霸氣表現了。 在IE6浏覽器下，haslayout下的元素負margin超出父标簽的部分會被隐藏掉，如下圖所示：
其他浏覽器下則不會有這樣讓人龇牙的表現，例如IE6的叔伯兄弟IE7浏覽器：
relative
屬性值的霸氣解決，即設定
margin
負值元素的
position
屬性值為
relative
。
您可以狠狠地點選這裡：IE6下relative霸氣應用demo
IE6浏覽器下，點選demo頁面中的按鈕，就會看到猶抱琵琶半遮面的圖檔部分完全顯露出來了，如下圖：
五、限魔大法的應用
absolute
羽翼尚存，過于強大，比較難以駕馭，是以
凡人們就大肆請relative屬性使用限魔大法來限制管制absolute元素，以幫助人們建造合乎他們要求的房子。
relative定位
是如何限制
absolute定位
的呢？
relative
的情況下，
absolute
添加
left/top
等屬性變身後可以發生瞬移，例如：
{ position: absolute; left: 20px; top: 20px; } 此時absolute所在元素就會迅速定位至距離浏覽器左側20像素，頂部20像素的地方，具體效果可參見下demo。
您可以狠狠地點選這裡：relative屬性之限魔大法demo
left/top
的計算是相對于浏覽器的。
position:relative
之後（點選demo頁中的按鈕），“限魔大法”就開始生效了，absolute的瞬移能力被限制了，被限制在了凡間，小小的屋子裡面。
俨然一個活生生的父親管束孩子的例子！
六、IE6你太看得起relative了
relative
屬性的認識上貌似出現了些偏差，真把
relative
當作
absolute
的父親了，實際上，知道過去這段曆史的人應該知道，二者其實是同一輩分的人，很多時候是平起平坐的，尤其在
z-index
縱雲梯技能的使用上。
1
的話，就算裡面
absolute
元素的層級是
9999
，也比不上其他父标簽層級
2
，裡面
absolute
元素的層級是
99
的雲梯高度。
具體可參見“IE6下z-index犯癫不起作用bug的初步研究”一文的part 4部分。
七、相對定位的最小化影響原則
到目前為止，本篇的文字都算是蠻寫意蠻随性的，都是比較基本的，大家都熟知的些東西。而本段，我要稍稍認真下了，因為這才是本文壓軸部分——相對定位的最小化影響原則。
相對定位所影響的子元素最小化，或沒有！這對于精簡代碼，友善後期維護，避免複雜互動中出現副作用很有幫助。
我們不妨舉個有悖“最小化影響原則”的例子——淘寶首頁的所有條目子產品（以及其他一些）：
position:relative
，于是，相對定位的影響觸及到其内部大大小小N多元素，同時子產品内部的清單頁都應用了
position:relative
屬性聲明，在我看來，這種方式的實作是不可取的（雖然看上去能夠實作效果）。
寫頁面，如果元素間的牽連甚廣，例如很多個内部元素的定位要依托于外部标簽，則該外部标簽就像是撫養了一大堆孩子的媽媽，有了責任，有了牽連，其自身行動就會限制，不能随意改動，不能把媽媽的身份扔掉一走了之。顯然，該标簽後期的可維護性就糟糕了！這就不難了解我所說的：最小化relative影響原則可以讓你後期更從容地修改元素的樣式，或是結構等。
我在系列二中濃煙重墨地表述“absolute可以一個人戰鬥”的觀點。
定位這東西，
margin
或
float
定位往往更具有适應性，還輪不到
absolute
；就算我們确實應該使用
absolute
絕對定位，在絕大多數情況下，我們是不需要多餘同時又不利于維護，留下潛在隐患的relative屬性的；就算我們要使用
relative相對定位
來限制
absolute
在小範圍内的定位，也不應該把
relative
屬性放在最外層的标簽上。
是以，在我看來，淘寶首頁一些子產品的定位實作是最下下的方法。
relative相對定位
”這種情況下，如何保證相對定位的最小化影響。 提問，對于下圖這個效果，右下角的綠色叉叉你如何絕對定位？
position:relative
，然後大大的綠色鈎鈎所在的标簽在該div内部絕對定位，如下代碼：
HTML部分：
<div class="test">
<div class="box">
CSS relative相對定位的最小化影響原則
<strong class="ok">√</strong>
</div>
</div> CSS部分：
.test {width:25em; margin:2em auto;}
.box { padding:2em; border:1px solid #beceeb; border-radius:2px; background-color:#f0f3f9; position:relative; }
.ok { color:green; font-size:6em; position:absolute; right:-11px; bottom:-.5em; } 您可以狠狠地點選這裡：未遵循最小化影響原則實作demo
position
屬性值為
relative
，這就不符合相對定位的最小化影響原則了。
下面來看看最小化影響原則下的例子：
HTML代碼：
<div class="test">
<div class="box">CSS relative相對定位的最小化影響原則</div>
<div class="rel"><strong class="ok">√</strong></div>
</div> CSS代碼：
.test {width:25em; margin:2em auto;}
.box { padding:2em; border:1px solid #beceeb; border-radius:2px; background-color:#f0f3f9; }
.rel { position:relative; }
.ok { color:green; font-size:6em; position:absolute; right:-10px; top:-1em; } 您可以狠狠地點選這裡：遵循最小化影響原則實作demo
relative
屬性的标簽下，于是，
relative
相對定位就不會影響任何其他元素，僅僅是其内部的絕對定位元素。于是，上面的文字内容div還是那個普普通通的文字内容div，以後要改動什麼東西就可以放心大膽的改，而不需要擔心扔掉那個屬性或是布局變了，裡面原來絕對定位的元素位置偏移掉了。