瀏覽器默認狀態下position的屬性默認值是static也就是沒有定位，元素出現在正常的文檔流中，這個時候給元素設置的left，right、bottom、top這些偏移屬性是沒有效果的，不會生效；
eg：比如你設置一個距左邊偏移100px的聲明：left：100px ；那么這條聲明不會起到任何的效果；此外還有z-index屬性在這時也是不會生效。也就是說我們平時如果不給某一個元素position屬性的聲明，那么他默認的就是我上述的這種情況，不過因為有了浮動，通常情況下我們不需要給元素設置position屬性！
***但是某些特殊的情況下，我們不得不用position屬性，下面詳解relative和absolute的值；
（1）relative 相對定位
如果我對某元素設置了相對定位，那么首先這個元素它會和其他的元素一樣，出現在文檔流中他該出現的位置，然后我們可以設置他的水平或垂直的偏移量，讓這個元素相對他在文檔中的位置的起始點進行移動。
****注意：在使用相對定位時，就算元素被偏移了，但是他仍然占據着它沒有偏移前的空間。如下圖：
我們先看看下圖：
上圖中有三個浮動的塊，第二個塊是設置了相對定位position:relative了的，這時大家看到它的位置並沒有其它什么不同，跟其它兩個塊一樣都處在正常的文檔流中。
接下來我給那個設置了position:relative的塊設置一個偏移：left:50px ; top:30px 這時我們再看看效果：
這時我們發現第二塊針對它本身位置的起點進行了一個偏移，但是它原來所占據的位置依然還在（虛線線框標示的地方），即使我們把偏移量設置的再大一些，使它完全離開原來的位置，它原來位於文檔流中的位置仍然會存在，不會被第三個塊浮動過來填補掉。
同時，它的偏移也不會把別的塊從文檔流中原來的位置擠開，如果有重疊的地方它會重疊在其它文檔流元素之上，而不是把它們擠開，就像圖中那樣，它已經覆蓋在了第三個塊之上。
我們可以設置它的的z-index屬性來調整它的堆疊順序。
（2）絕對定位：position：absolute
被設置了絕對定位的元素，在文檔流中是不占據空間的，如果元素設置了絕對定位，那么他在文檔流中的位置會被刪除，那這個元素到哪去了呢？它浮了起來其實設置了相對定位定位的relative時也會讓該元素浮起來，但是他們的不同點在於，相對定位不會刪除他本省在文檔流中占據的那塊空間，而絕對定位會刪除該元素在文檔流中的位置，完全從文檔流中抽出，我們可以使z-index來設置他們的堆疊順序。
***絕對定位是如何定位的呢？1、如果它的父元素設置了除static之外的定位，比如：position：relative；position：absulote；position：fixed；，那么他就會相對它的父元素來定位，位置通過left，top，right，bottom屬性來規定，如果他的父元素沒有設置定位，那么就得看它的元素的父元素是否有設置定位，如果還是沒有就繼續想更高的祖先元素類推，總是它的定位就是相對與設置了除atatic定位之外的定位（eg：position：absulote；等）的第一個祖元素，如果所有的祖元素都沒有以上三種定位中的一種定位，那么他就相對於文檔body來定位（並非窗口，相對於窗口定位的是fixed）
絕對定位的元素相對與誰來定位，我們就把這個“誰”叫做參照物，如下圖：
然后我們給第二個塊設置絕對定位：position:absolute 然后再設置一個偏移：left:150px;top:40px; 這時就變成了下圖所示：
還有一點就是：在設置偏移量的時候，我們可以設置負值。
eg：首先我們來看看下圖：
在上圖中的去購物車結算按鈕左上方有一個紅色的小塊，用來顯示購物車中有幾件商品，大家在沒學會絕對定位之前可能不知道這個紅色的小塊要怎么實現，但是現在剛剛學了絕對定位，這個問題就不再是問題了。
我還是親自來做一下吧，我們先把這個背景圖片弄出來：
然后我們寫HTML:
<div class="cart_btn">
<span><i>155</i></span>
<a href="dd.html" target="_blank>去購物車結算</a>
<b></b>
上面HTML代碼中的 span元素就是那個用來顯示購物車中商品數量的小紅塊，a元素中是文字描述，b元素是最右邊的小三角。
我們來看一下CSS代碼：
.cart_btn{width:120px;height:30px;background:url(../images/picA.png) no-repeat -17px 7px#f7f7f7;border:1px solid #eee;padding-left:30px;position:relative;_padding-top:5px;_height:25px;}
.cart_btn span{background:url(../images/picA.png) no-repeat -36px -54px;padding-left:7px;position:absolute; top:-12px;left:20px;}
.cart_btn span i{float:left;height:20px;background:url(../images/picA.png) no-repeat right-25px;padding-right:5px;font-style:normal;color:#fff;font-size:14px;}
.cart_btn a{color:#aaa;text-decoration:none;font-size:14px;padding-left:15px;line-height:30px;}
.cart_btn b{display:inline-block;border-color:transparent transparent transparent #CCCCCC;border-style:dashed dashed dashed solid;border-width:5px;height: 0;overflow: hidden;width: 0;}
上面CSS代碼中我們把購物車圖標作為.cart_btn的背景，這里我們發現一個問題，就是那一張圖片上有三個圖標，大家也發現了，我三個用到圖標的元素都是用這一張圖片做背景，但是顯示的卻不一樣，這里就用到了我們前面講過的背景定位問題，不會的朋友可認去看看前面的第十一講：css背景屬性background詳細講解-使用背景圖片
CSS中的內容是什么意思這里就不講了，要講的話就跑題了，這些都是基本的東西，除了那個CSS三角形之外，其它的如果都還不會，那你肯定沒有好好看前面的文章。再說你實在不懂的話也可以去查一查參考手冊
最后我們來看看瀏覽器里的效果：
</div>