一：絕對定位（position: absolute）
絕對定位：絕對定位是相對於元素最近的已定位的祖先元素（即是設定了絕對定位或者相對定位的祖先元素）。如果元素沒有已定位的祖先元素，那麼它的位置則是相對於最初的包含塊（body）。
絕對定位本身與文件流無關，因此不佔空間，普通文件流中的元素的布局就當絕對定位的元素不存時一樣，所以 它們可以覆蓋頁面上其他的元素，且可以通過z-index屬性來控制這些層的對方順序。
特點：相對於 自己原來在標準流中位置來移動的 原來在標準流的區域繼續占有，後面的盒子仍然以標準流的方式對待它。
二：相對定位（position: relative）
相對定位：相對定位是相對於元素在文件中的初始位置——首先它出現在它所在的位置上（即不設定position時的位置，然後通過設定垂直或水平位置，讓這個元素「相對於」它的原始起點進行移動；
注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
特點：絕對是以帶有定位的父級元素來移動位置 （拼爹型）
如果父級都沒有定位，則以瀏覽器文件為準 移動位置 不保留原來的位置，完全是脫標的。
它必須搭配top、bottom、left、right這四個屬性一起使用，用來指定偏移的方向和距離。
三：固定定位（position: fixed）
1.完全脫標 —— 完全不佔位置；
2.只認瀏覽器的可視視窗 —— 瀏覽器可視視窗 + 邊偏移屬性 來設定元素的位置；
特點：跟父元素沒有任何關係；
單獨使用的 不隨滾動條滾動。
四：靜態定位(fixed)
靜態定位是元素的預設定位方式，無定位的意思。
它相當於 border 裡面的none， 不要定位的時 候用。
靜態定位 按照標準流特性擺放位置，它沒有邊偏移。
靜態定位在布局時我們幾乎不用的
它如果搭配top、bottom、left、right這四個屬性一起使用，表示元素的初始位置是基於視口計算的，否則初始位置就是元素的預設位置。
relative定位與absolute定位的區別
初始**
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
.box1
.box2
.box3
.box4
.box5
style
>
head
>
>
class
="box1"
>
123456789div
>
class
="box2"
>
123456789div
>
class
="box3"
>
123456789div
>
class
="box4"
>
123456789div
>
class
="box5"
>
123456789div
>
body
>
html
>
給第二個box設定relative：
.box2
元素相對於原來位置偏移，寬高都沒變，撐大了容器。
只給第五個box設定absolute：
.box5
說明：元素在沒有定義寬度的情況下，寬度由元素裡面的內容決定，效果和用float方法一樣。
給box5設定偏移值：
.box5
在父元素沒有設定相對定位或絕對定位的情況下，元素相對於根元素定位（即html元素）（是父元素沒有）。
父元素設定了相對定位或絕對定位，元素會相對於離自己最近的設定了相對或絕對定位的父元素進行定位（或者說離自己最近的不是static的父元素進行定位，因為元素預設是static）。
總結
css 中相對定位和絕對定位
1.css中定位機制有三種 標準文件流,浮動,絕對定位 2.絕對定位就屬於第三種定位,用到position屬性,下面就是具體設定 相對定位 相對於自身原有位置 就是普通流的時候 進行偏移 設定top,left.後 仍然處於標準文件流中 隨即擁有偏移屬性和z index屬性 絕對定位 建立了以包含塊為...
css中的相對定位和絕對定位
這幾天在看div css，在網上找到了很多的資料，我都不知道選擇哪乙個了。這兩天在看 十天學會web標準 div css 感覺還可以。把今天學習過程中遇到的問題和知識點，給記錄下來。首先學習到的是css中的相對定位和絕對定位。定位標籤 position 包含屬性 relative 相對 absolu...
css中的相對定位和絕對定位
原文 這幾天在看div css，在網上找到了很多的資料，我都不知道選擇哪乙個了。這兩天在看 十天學會web標準 div css 感覺還可以。把今天學習過程中遇到的問題和知識點，給記錄下來。首先學習到的是css中的相對定位和絕對定位。定位標籤 position 包含屬性 relative 相對 abs...