css有5種不同的position屬性值
我們不會討論inherit，因為顧名思義，它就是繼承了父元素的值，而且在比較老的ie版本中，支援情況也不好。
任何元素的position屬性的預設值都是static。所謂的static定位就是元素在文件流中。當然了，這完全取決於你的html結構。
另乙個值你肯定見過，它就是fixed。說白了，它就是把乙個物件釘在背景上，因此無論你把它放在哪，它就會一直在那。我們經常在sidebar的導航元素中看到它的身影，當頁面向下滾動了很遠的距離，這時候我們想回到頂部，如果沒有乙個fixed的導航，這種使用者體驗是很差的。
前面這三個值都很淺顯易懂，接下來是絕對定位和相對定位。我們會單獨的解釋這些值，並且會討論它們如何配合使用。
絕對定位
使用絕對定位，你可以讓乙個元素脫離文件流，並且把它放在頁面上某個指定的位置。為了了解它如何工作，我們建立了乙個簡單的無序列表。
正如我們說過的，列表項（list item）預設的定位方式是static，這就意味著它們會跟隨標準的文件流。下面我對其中一項使用絕對定位。
如你所見，第4項完全脫離了文件流，並且位於瀏覽器視窗的左上角。請注意，即使有其他內容佔據了這個位置，這個元素也不在乎。當我們使用絕對定位時，它不會影響文件流中的其他元素，也不會被別的元素影響。
使用絕對定位的原因是我們想精確的定位，通過top、bottom、left和right屬性，我們可以實現。舉個例子，我們想讓第4項距離頂部20px，距離左邊20px。
為了證明絕對定位不會影響別的元素（或反之），我們讓第4項靠近其他列表項。可以看到，它會疊加在其他元素上面而不是把它們擠開。
最後要注意的是，第5項佔據了原來第4項的位置，而不是保持不動，就像第4項還在那一樣。因為第4項脫離了文件流，其他所有元素都會進行調整。
相對定位
相對定位和絕對定位很類似，你也可以使用top、bottom、left和right進行精確定位。主要的區別在於元素的起始點不同。正如你前面看到的，絕對定位的起始點是瀏覽器視窗的左上角。同樣的例子，來看看如果我們使用相對定位會怎樣。
什麼都沒發生！事實證明，這個物件的確進行了相對定位，但是它的起始點就是元素在文件流的位置，而不是頁面的左上角。現在，如果你使用相同的20px進行偏移，結果就會不同了。
這一次，這個元素相對於它的起始位置發生了位移。當你只是想對元素的位置進行微調的時候，這就非常有用了。請注意，和絕對定位一樣，相對定位的元素同樣不關心文件流中的其他元素。但是，相對定位的元素原來的位置不會被後面的元素佔據，這和絕對定位不同，相對定位對文件流不會產生任何影響，就好像那個元素從未移動過。
它們如何配合使用
我們通過乙個小例子來演示
html
建立乙個div，class是「photo」，裡面有一張200*200px的，這就是所有的html。
基本的css先簡單的進行一些設定，比如把背景的顏色調暗些，給設定乙個大小，設定好看的邊框和陰影效果。
body效果如下：.photo
貼上乙個膠帶
我們想要的效果是使用一塊小膠帶把貼在背景上。
首先我們使用 :before 偽類建立膠帶。我們給它20px高度和100px寬度，然後背景設定為白色，不透明度為50%，這裡我又加了一點點陰影效果。
.photo:before效果如下。膠帶實際上影響了文件流。即使它不可見，它還是把擠出了邊框的範圍。
既然發現了偽類帶來的問題，為了解決這些問題，我們先試著給膠帶使用相對定位。
.photo:before效果如下：
如你所見，問題沒有得到解決，那接著嘗試絕對定位。
.photo:before效果如下：
這回膠帶移動了，卻移到角落上去了。我們可以使用top和left進行推移，但這還是解決不了問題。為什麼呢？
分析一下原因，我們知道絕對定位可以把膠帶定位到某個精確的位置，但是這張會自動水平居中，所以當你改變視窗大小時，的位置會進行調整，這時膠帶的位置就又有問題了。
現在，我們嘗試完了相對定位和絕對定位，但是都不能解決問題。我們接下來該怎麼辦呢？
別急，到現在我們還沒有解釋絕對定位背後的故事，實際上，絕對定位並不總是以瀏覽器視窗的左上角為起始點。我們所說的 position: absolute; 表示的是相對於元素的第乙個非static定位的父元素進行絕對定位，也就是說絕對定位不是完全的絕對，而是相對於某個父元素，如果不存在這個父元素，預設就是瀏覽器視窗（不是html或body節點！）
回到剛才的例子，我們還是對膠帶使用絕對定位，但是首先需要確定絕對定位相對的父元素，也就是photo。我們不想對photo使用絕對定位，因為我們並不想移動它。因此，我們對它使用相對定位。
.photo效果如下：.photo:before
距離勝利還有一步之遙，最後我們還需要調整一下膠帶的位置。注意一下，我為top屬性設定了乙個負值，因此膠帶會偏離，產生一種浮在背景上的感覺。設定left屬性使膠帶位於的中間位置。
.photo:before效果如下：
小結
記住以下3點吧：
1. 相對定位就是相對於元素原來的位置讓元素產生位移
2. 絕對定位就是相對於元素第乙個非static定位的父元素進行定位
3. 相對定位或絕對定位的元素不會影響旁邊的static定位或fixed定位的元素（絕對定位會脫離文件流，相對定位會佔據原來的位置）
絕對定位和相對定位
換了乙個新工作，一上來就是改前台web頁面之類的東西，工作這麼久以來web css之類的只是皮毛級應用，知之勝少，搞乙個css定位之類的東西還讓我費了好大一番勁，丟人啊。研究了以下，稍微總結一下吧。絕對定位和相對定位 這裡以div容器為例 1 相對定位 元素框偏移某個距離。元素仍保持其未定位前的形狀...
相對定位和絕對定位
相對定位和絕對定位 定位標籤 position 包含屬性 relative 相對 absolute 絕對 1.position relative 如果對乙個元素進行相對定位，首先它將出現在它所在的位置上。然後通過設定垂直或水平位置，讓這個元素 相對於 它的原始起點進行移動。再一點，相對定位時，無論是...
絕對定位和相對定位
css的相對定位和絕對定位 通常情況下，我們元素的position屬性的值預設為static 就是沒有定位，元素出現在正常的文件流中，這個時候你給這個元素設定的left,right,bottom,top這些偏移屬性都是沒有效果的，不會生效，比如你設定乙個距離左邊距偏移100px的宣告 left 10...