設定為相對定位(relative)的元素會偏移某個距離，元素仍保持其未定位前的形狀，他原本所佔的空間仍然保留
相對定位是乙個非常容易掌握的概念，如果對乙個元素進行相對定位，它將出現在它所在的位置上 ，然後可以通過設定垂直或者水平位置讓這個元素相對於它的起點進行移動。如果將top 設定為20px， 那麼框的位置就在頂部下方20px的地方，如果 left 設定為 30 畫素，那麼會在元素左邊建立 30 畫素的空間，也就是將元素向右移動。
注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
設定為絕對定位的元素框從文件中完全刪除，並相對於其包含塊定位。包含塊可能是文件中另乙個元素或者初始包含塊，元素原先在正常文件流中所佔的空間會關閉，就好像元素原來的位置不存在一樣，元素定位後生成乙個塊級框而不論原來他在正常流中生成何種型別的框。
絕對定位使元素的位置與文件流無關，因此不佔據空間，這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。普通流中其它元素的布局就像絕對定位的元素不存在一樣：
在css中一共有n種定位方式，其中，static ,relative,absolute三種方式是最基本最常用的三種定位方式。他們的基
本介紹如下。
static預設定位方式
relative相對定位，相對於原來的位置，但是原來的位置仍然保留
absolute定位，相對於最近的非標準劉定位，原來的位置消失，被後邊的位置所頂替
通常情況下，我們元素的position屬性的值預設為static 就是沒有定位，元素出現在正常的文件流中，這個時候你給這個元素設定的left,right,bottom,top這些偏移屬性都是沒有效果的，不會生效，比如你設定乙個距離左邊距偏移100px的宣告：left:100px 那麼這條宣告不會起到任何效果，還有z-index屬性在這時也不會生效，也就是說我們平時如果不給某元素乙個position屬性的宣告，那麼它預設的就是我上述的這種情況，不過因為有了浮動，所以通常情況下我們還真不需要給元素設定position屬性
但是某些特殊的情況下，我們不得不用到position屬性，那我們今天就講講position屬性的relative和absolute值
首先說relative ，相對定位。
怎麼理解呢？如果說我對某元素設定了相對定位，那麼首先這個元素他會跟其它的元素一樣，出現在文件流中它該出現的位置，然後，我們可以設定它的水平或垂直偏移量，讓這個元素相對於它在文件流中的位置的起始點進行移動。有一點要注意， 在使用相對定位時，就算元素被偏移了，但是他仍然佔據著它沒偏移前的空間。這裡值得注意的一點是：偏移可不是邊距，跟邊距是不一樣的。
我們先看看下圖：
上圖中有三個浮動的塊，第二個塊是設定了相對定位position:relative了的，這時大家看到它的位置並沒有其它什麼不同，跟其它兩個塊一樣都處在正常的文件流中。
接下來我給那個設定了position:relative的塊設定乙個偏移：left:50px ; top:30px 這時我們再看看效果：
這時我們發現第二個塊針對它本身位置的起始點進行了乙個偏移，但是它原來所佔據的那個位置空間依然還在(虛線框標示的地方)，即使我們把偏移量設定得再大一點，使它完全離開原來的位置，它原來位於文件流中的位置仍然會存在，不會被第三個塊浮動過來填補掉。同時，它的偏移也不會把別的塊從文件流中原來的位置擠開，如果有重疊的地方它會重疊在其它文件流元素之上，而不是把它們擠開，就像圖中那樣，它已經覆蓋在了第三個塊之上。
我們可以設定它的z-index屬性來調整它的堆疊順序。
接下來我們來看看絕對定位：position:absolute
被設定了絕對定位的元素，在文件流中是不佔據空間的，如果某元素設定了絕對定位，那麼它在文件流中的位置會被刪除，那這個元素到哪去了呢？它浮了起來，其實設定了相對定位relative時也會讓該 元素浮起來，但它們的不同點在於，相對對定位不會刪除它本身在文件流中佔據的那塊空間，而絕對定位則會刪除掉該元素在文件流中的位置，完全從文件流中抽了出來，我們可以通過z-index來設定它們的堆疊順序 。
那麼絕對定位是如何定位的呢？首先，如果它的父元素設定了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那麼它就會相對於它的父元素來定位，位置通過left , top ,right ,bottom屬性來規定，如果它的父元素沒有設定定位，那麼就得看它父元素的父元素是否有設定定位 ，如果還是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對於設定了除static定位之外的定位（比如position:relative）的第乙個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那麼它就會相對於文件body來定位（並非視窗,相對於視窗定位的是fixed），絕對定位的元素相對於誰來定位，我們就把這個"誰"叫著參照物，我們結合上面的講解來看看下圖就明白了 ：
我們看一下在瀏覽器裡的效果，我們先看看沒有使用絕對定位時的樣子：
然後我們給第二個塊設定絕對定位：position:absolute 然後再設定乙個偏移：left:150px;top:40px; 這時就變成了下圖所示：
還有一點就是：在設定偏移量的時候，我們可以設定負值。
**：
CSS學習之 定位
如果，說浮動，關鍵在乙個 浮 字上面，那麼 我們的定位，關鍵在於乙個 位 上。css離不開定位，特別是js特效，天天和定位打交道。那麼定位，最常運用的場景再那裡呢？小黃色塊可以再上移動 元素的定位屬性主要包括定位模式和邊偏移兩部分。1 邊偏移 邊偏移屬性 描述top 頂端偏移量，定義元素相對於其父元...
CSS學習之position定位
定位在css中可謂是布局的常用手段，配合浮動能使網頁布局更加的靈活多變，今天跟大家一起分享下學習定位的一點小結 css中預設不開啟定位，其元素的position屬性預設值為static。若想要元素定位，則需手動開啟定位，即設定position的屬性值可選為 relative，absolute，fix...
HTML學習之CSS定位
css可以使用屬性position來實現定位 屬性值作用 具體說明 relative 相對定位 相對元素自己原有位置移動指定的距離，可以使用top left right bottom進行設定，其他元素的位置不會隨之改變 absolute 絕對定位 可以使元素參照介面或者相對父元素進行移動，可以使用t...