css2.0的解釋：
設定此屬性值為 absolute 會將物件拖離出正常的文件流絕對定位而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的物件已經佔據了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時物件不具有外補丁( margin )，但仍有內補丁( padding )和邊框( border )。
要啟用物件的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少乙個，並且設定此屬性值為 absolute 。否則上述屬性會使用他們的預設值 auto ，這將導致物件遵從正常的html布局規則，在前乙個物件之後立即被呈遞。
trbl屬性（top、right、bottom、left）只有當設定了position屬性才有效。
當設定position:absolute
如果父級（無限）沒有設定position屬性，那麼當前的absolute則結合trbl屬性以瀏覽器左上角為原始點進行定位
如果父級（無限）設定position屬性，那麼當前的absolute則結合trbl屬性以父級（最近）的左上角為原始點進行定位。
當設定position:hrkyxsy relative
則參照父級（最近）的內容區的左上角為原始點結合trbl屬性進行定位（或者說相對於被定位元素在父級內容區中的上乙個元素進行偏移），無父級則以body的左上角為原始點。相對定位是不能層疊的。在使用相對定位時，無論元素是否進行移動，元素依然佔據原來的空間。因此，移動元素會導致它覆蓋其他框。
一般來講，網頁居中的話用absolute就容易出錯，因為網頁一直是隨著解析度的大小自動適應的，而absolute則會以瀏覽器的左上角為原始點，不會應為解析度的變化而變化位置。有時還需要依靠z-index來設定容器的上下關係，數值越大越在最上面，數值範圍是自然數。當然有一點要注意，父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。
設定此屬性值為 relative 會保持物件在正常的html流中，但是它的位置可以根據它的前乙個物件進行偏移。在相對(relative)定位物件之後的文字或物件占有他們自己的空間而不會覆蓋被定位物件的自然空間。與此不同的，在絕對(absolute)定位物件之後的文字或物件在被定位物件被拖離正常文件流之前會占有它的自然空間。放置絕對(absolute)定位物件在可視區域之外會導致滾動條出現。而放置相對(relative)定位物件在可視區域之外，滾動條不會出現。其實對於定位的主要問題是要記住每個定位的意義。相對定位是「相對於「元素在文件流中初始位置的，而絕對定位是」相對於「最近的已經定位的祖先元素。
以下是補充：
雖然有知道css的絕對定位（absolutwww.cppcns.come）、相對定位（relative），但卻從未自己動手寫過相關的效果！
忙活了一大半天，也算是完成了！也把這兩個屬性搞明白了一些！
總結如下：
先看下面這乙個層結構
複製**
**如下:
此層只應用position：relative;樣式
此層只應用position：absolute;樣式
不應用樣式
1、absolute：不佔位、relative：有佔位！
如上層結構:
id為rel的層在顯示時，會占用一行！其後面的abs層只會在下一行顯示出來！
id為abs的層在顯示時，會與後面id為sss的重疊在一起！
2、預設情況下（不結合top等來定位），absolute（絕對定位）以父層來定位的
如上面的id為abs的層，如果不結合top等來定位，則其顯示位置會隨父級posi層（posi在文件左下角，其也會在左下角）
3、在結合top、bottom、right、left等屬性時，absolute（絕對定位）以視窗做為定位，relative以自身的佔位為基線做偏移！如下：
複製**
**如下:
不應用樣式
此層應用position：relative;bottom：30px;樣式
此層只應用position：absolute;bottom：30px;樣式
以上**：
id為rel的層會上移並與id為sss的層重疊
id為abs的層會以視窗為基線，移至距離視窗30畫素的位置！
4、在結合top、bottom、right、left等屬性時，如果想absolute（絕對定位）能以父層做為定位基線的話，則在父層應用absolute或relativ屬性就可以!如下：
複製**
**如下:
此層應用position：relative;bottom：30px;樣式
此層只應用position：absolute;bottom：30px;樣式
gt;
以上**：id為posi的層，也可以用absolute屬性！
id為rel的層，不受影響，以自身的佔位為基線做偏移！
id為abs的層是以id為posi層的底邊做為定位基線，如果此時posi層的高度小於30px的話，abs層可能沒辦法看到哦！
個人總結：
position:relative和position:absolute都可以改變元素在文件中的位置，都能啟用元素的left、top、right、bottom和z-index屬性。（預設這些屬性未啟用，設定了也無效）
設定position:relative和position:absolute都會讓元素浮起來，會改變正常情況下的文件流。
不同：position:relative會保留自己在z-index:0層的佔位，left、top、right、bottom值是相對於自己在z-index層的位置。
position:absolute會完全脫離文件流，不再z-index:0層保留佔位符，其left、top、right、bottom值是相對於自己最近的乙個設定了position程式設計客棧:relative或position:absolute的祖先元素的，如果祖先元素全都沒有設定，那麼就相對於body元素
本文標題: css中position屬性使用詳解
本文位址: /web/css/83137.html
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
宣告：凡註明"本站原創"的所有文字等資料，版權均屬程式設計客棧所有，歡迎**，但務請註明出處。
標籤：css position relative absolute
一款利用純css3實現的超炫3d表單的例項教程一款純css3實現的漂亮的404頁面的例項教程
您可能感興趣的文章:
廣告贊助
廣告贊助
最新發布
全站最新
廣而告之
舉例詳解CSS中position屬性的使用
position 這個屬性決定了元素將如何定位。它的值大概有以下五種 每個網頁都可以看成是由一層一層頁面堆疊起來的，如下圖所示。position 設定為 relative 的時候，元素依然在普通流中，位置是正常位置，你可以通過 left right 等移動元素。會影響其他元素的位置。而當乙個元素的 ...
CSS中position屬性解析
css中的position屬性有static，relative，absolute和fixed四個。他們之間的區別是什麼呢？position屬性的預設值是static。主要是要弄清楚兩個問題 物件能不能被定位 即通過top,left,bottom,right能不能定義物件的相對偏移量 物件定位的參考點...
CSS中的Position屬性
size large size large css的position很重要，有以下幾個值 static，relative，absolute，fixed。static 靜態定位。如果你沒有設定position屬性，那麼預設就是static。top，left，bottom，right等屬性，在stati...