position屬性用來定義元素的定位方式。
static 預設值
absolute 絕對定位
fixed 固定定位
relative 相對定位
sticky 粘性定位 （css3新增）
定位的作用:
以下就五個屬性值展開介紹：
一、position: static; 預設值，無定位
此時 top、right、bottom、left 屬性無效。
<
!doctype html>
"utf-8"
>
<
/title>
"text/css"
>
body
.a1.a2
.a3.a4
<
/style>
<
/head>
="a1"
>第乙個div<
/div>
="a2"
>a2第二個div<
/div>
="a3"
>a3第三個div<
/div>
="a4"
>a4第四個div<
/div>
<
/body>
<
/html>
1、當乙個元素設定為絕對定位後，該元素會脫離文件流。
如果下面的元素沒有新增定位，絕對定位的元素會將其覆蓋，文字也會被蓋住(即全脫離)。
在上面的結構中，給.a2加絕對定位後：
2、層疊順序
如果多個元素同時給了絕對定位，他們之間的疊層順序是：結構在後的元素在最上面。
給.a2、.a3、.a4加絕對定位後：
如果想要改變定位之後的層疊順序，可以通過屬性 z-index 來改變。
z-index的預設值是auto，不帶單位、可給負值。數值越大，層越靠上。
給.a2、.a3、.a4加絕對定位，同時.a2新增屬性 z-index: 1;後：
3、移動位置
定位之後想要移動位置，除了可以使用margin等以外，還可以用left、right、top、bottom作為屬性來移動。
要注意的是，使用left/right/top/bottom移動位置時，絕對定位元素的參照物有兩種情況：
1）如果其父元素沒有定位，那麼參照物為瀏覽器的第一屏；
<
!doctype html>
"utf-8"
>
<
/title>
"text/css"
>
body
.a1.a2
.a3.a4
.box
<
/style>
<
/head>
="a1"
>第乙個div<
/div>
="box"
>a2的父元素
="a2"
>a2第二個div<
/div>
<
/div>
="a3"
>a3第三個div<
/div>
="a4"
>a4第四個div<
/div>
<
/body>
<
/html>
給.box加定位之後:
三、position: fixed;固定定位
1、新增固定定位的元素，該元素會固定在某個位置不動，並且會脫離文件流。
2、用left/right/top/bottom移動位置時的參照物，只有1個，是瀏覽器的當前視窗。
3、層疊順序:
多個元素同時給了固定定位，結構在後的覆蓋在上面。也可使用z-index來改變層疊順序。
四、position:relative;相對定位
1、相對定位之後的元素是佔瀏覽器位置的，不脫離文件流。
2、用left/right/top/bottom移動位置時，參照物是自己的初始位置。
移動位置之後，原來的空間還在。
"text/css"
>
body
.a1.a2
.a3<
/style>
多個元素給相對定位之後，如果沒有移動位置，那麼他們之間就不會有覆蓋現象。
如果移動了位置，那麼後面的元素還是會覆蓋前面的元素。此時，可以用z-index改變層疊順序。
五、position: sticky;粘性定位
粘性定位是相對和固定定位的混合體，一般用來實現導航的吸頂效果。
預設情況下，該元素被視為相對定位，直到它超過一定的範圍之後，此時它被視為固定定位。
因為sticky為css3新增加的屬性，對於瀏覽器存在相容問題，而js能更好的實現吸頂效果，這裡不再贅述。
CSS 定位position屬性
div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即 塊框 與之相反，span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中，即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block，可以讓行內元素...
CSS 定位屬性position
一 position 屬性 規定元素的定位型別。即元素脫離文件流的布局，在頁面的任意位置顯示。有4種不同型別的定位 absolute 絕對定位 脫離文件流的布局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素 postion不為static 否則為body文件本身。relative 相...
CSS定位屬性Position詳解
css中最常用的布局類屬性，乙個是float css浮動屬性float詳解 另乙個就是css定位屬性position。所有元素的預設定位都是 position static，這意味著元素沒有被定位，而且在文件 現在它應該在的位置。一般來說，不用指定 position static，除非想要覆蓋之前設...