文件流中的元素的位置由元素在 (x)html 中的位置決定，這就是最原始的普通流，前面講到的浮動css學習筆記08 浮動
可以改變元素在文件流中的位置，除了這個我們還可以通過使用css的position 屬性，來重新決定元素在文件流中的位置。
static就是預設的布局方式，這裡不做介紹。
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>css相對定位
這時候box1與box2按照static的布局方式在頁面上進行定位，現在對box2進行相對定位
結果如下，box2的位置進行了偏移（這個偏移是相對於box2原先的位置進行偏移的），並沒有影響到box1與box3的位置
注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>css絕對定位
現在給parent也新增乙個定位屬性
效果如下，可以看到child的位置發生了變化
從上面的現象可以總結出一點：絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（這個例子中指body元素與parent）。
要使用絕對定位時，必須要有2個條件
1、必須給父元素增加定位屬性，一般建議使用position:relative
2、給子元素加絕對定位position:absolute，同時要加方向屬性（指left、right、top、bottom屬性）
與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響。
1效果如下，回到頂部這個div始終在同乙個位置，部落格頁面上的doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>css固定定位
title
>
6<
style
type
="text/css"
>
7.back-top
8style
>
9head
>
10<
body
>
11<
div
class
="back-top"
>回到頂部
div>
12<
p>段落1
p>
13<
p>段落2
p>
14<
p>段落3
p>
15...
16<
p>段落49
p>
17<
p>段落50
p>
18body
>
19html
>
也是使用的固定定位。
絕對定位根據父元素為基準點進行定位，它會脫離文件流，不占用原來位置空間
相對定位根據自身為基準點進行定位，離開原位置，但是還是會占用原來位置空間
固定定位根據瀏覽器視窗為基準點進行定位，它始終在乙個位置，不會移動
CSS學習筆記10 相對定位，絕對定位與固定定位
這時候box1與box2按照static的布局方式在頁面上進行定位，現在對box2進行相對定位 結果如下，box2的位置進行了偏移 這個偏移是相對於box2原先的位置進行偏移的 並沒有影響到box1與box3的位置 注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導...
學習筆記（13 相對定位 固定定位 絕對定位
立即學習 相對定位 position relative 空間存在，內容存在，相對參照物是元素本來的位置 固定定位 position fixed 空間不存在，內容存在，相對參照物是整個瀏覽器四邊 絕對定位 position absolute 空間不存在，內容存在，相對參照物是最近的已經定位的上級 ps...
CSS相對定位絕對定位
absolute 絕對定位 一共有四個屬性值 top right bottom left position absolute top 20px 絕對定位的參考點就是他的父級。同理，如果父級沒有定位屬性，就查詢他的爺爺級.relative 相對定位相對定位與絕對定位結合使用 通常情況下，在對元素設定絕...