定位有三種，分別是相對定位、絕對定位、固定定位。
相對定位：
position:relative;
絕對定位：
position:absolute;
固定定位：
position:fixed;
相對定位
相對定位，就是微調元素位置的。讓元素相對自己原來的位置，進行位置調整。
<
head
>
<
meta
charset=
"utf-8"
>
<
title
>
position 相對定位
title
>
<
style
>
p
span
div
style
>
head
>
<
body
>
<
p
>
11111
p
>
<
span
>
22222
span
>
<
div
>
4444
div
>
body
>
tips:
相對定位不脫標，真實位置是在老家，只不過影子出去了，可以到處飄。
它原本的位置會一直存在，不會被其他盒子佔據。
相對定位用途
相對定位有坑，所以一般不用於做「壓蓋」效果。頁面中，效果極小。
1） 微調元素
2） 做絕對定位的參考，子絕父相（講絕對定位的時候說）
相對定位的定位值
可以用left、right來描述盒子右、左的移動；
可以用top、bottom來描述盒子的下、上的移動。
top/bottom;left/right只能同時存在乙個
絕對定位
絕對定位的盒子，
是脫離標準文件流的。所以，所有的標準文件流的性質，絕對定位之後都不遵守了。
絕對定位之後，標籤就不區分所謂的行內元素、塊級元素了，不需要display:block;就可以設定寬、高了。
參考點絕對定位的參考點，如果用top描述，那麼定位參考點就是頁面的左上角，而不是瀏覽器的左上角：
如果用bottom描述，那麼就是瀏覽器首屏視窗尺寸，對應的頁面的左下角：
以盒子為參考點
(因為瀏覽器的大小是不一樣的，在瀏覽器中漂浮在任意位置沒有任何意義)
乙個絕對定位的元素，如果父輩元素中出現了也定位了的元素，那麼將以父輩這個元素，為參考點。
子絕父相:
子絕父相
title
>
<
style
> .
div1
.div2
style
>
head
>
<
body
>
<
div
class=
"div1"
>
<
div
class=
"div2"
>
22div
>
div
>
body
>
tips:
不一定是相對定位，任何定位，都可以作為參考點
子絕父絕、子絕父相、子絕父固，都是可以給兒子定位的。但是，工程上子絕、父絕，沒有乙個盒子在標準流裡面了，所以頁面就不穩固，沒有任何實戰用途。工程上，「子絕父相」有意義，父親沒有脫標，兒子脫標在父親的範圍裡面移動。
絕對定位的兒子，無視參考的那個盒子的padding。
下圖中，綠色部分是div的padding，藍色部分是div的內容區域。那麼此時，div相對定位，p絕對定位。
p將無視父親的padding，在border內側為參考點，進行定
絕對定位的盒子居中
絕對定位之後，所有標準流的規則，都不適用了。所以margin:0 auto;居中效果失效。
div
固定定位
position：fixed；
固定定位就是相對瀏覽器視窗定位。無論頁面如何滾動，這個盒子顯示的位置不變(返回頂部按鈕、導航欄等）
固定定位會脫離標準文件流。
用途：返回頂部按鈕
頂部導航條的固定
相對定位 絕對定位 固定定位
設定position屬性值為static的元素是乙個靜態定位元素，此值為預設值，即此元素在正常文件流中。設定position屬性為relative的元素是乙個相對定位元素，其定位的參照物為元素本身 即元素原本的位置進行定位 例項 parent child style class parent cla...
相對定位 絕對定位 固定定位 粘滯定位（css）
定位 position position 可選值static 預設值 元素是靜止的沒有開啟定位 relative開啟元素的相對定位 absolute開啟元素的絕對定位 fixed開啟元素的固定定位 sticky開啟元素的粘滯定位 相對定位position relative 元素開啟相對定位後，如果不...
前端CSS 相對定位,絕對定位,固定定位
position relative 必須先宣告，自己要相對定位了，left 100px 然後進行調整。top 150px 然後進行調整。相對定位不脫標,真實位置是在老家,只不過影子出去了,可以到處飄.position relative right 100px 往左邊移動 top 100px posi...