閑言碎語(yǔ)不多說，直接開寫！

關(guān)于定位

我們可以使用css的position屬性來設(shè)置元素定位類型，position的設(shè)置項(xiàng)如下：

　　a、relative生成相對(duì)定位元素，元素所占據(jù)的文檔流的位置不變（即元素不會(huì)脫離文檔流），元素本身相對(duì)文檔流的位置進(jìn)行偏移。（相對(duì)于自身的位置定位）

　　b、absolute生成絕對(duì)定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，（元素會(huì)漂流我在文檔流的上方），相對(duì)于上一個(gè)設(shè)置了相對(duì)定位或者絕對(duì)定位或者固定定位的父級(jí)元素來進(jìn)行定位，如果找不到，則相對(duì)于body元素進(jìn)行定位。（做絕對(duì)定位時(shí)一般會(huì)把父級(jí)元素設(shè)置為相對(duì)定位，把父級(jí)元素作為基點(diǎn)）

　　c、fixed生成固定定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，相對(duì)于瀏覽器窗口進(jìn)行定位。

　　d、static默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中，相對(duì)于取消定位屬性或者不設(shè)置定位屬性。

　　e、inherit從父級(jí)元素繼承position屬性值。

定位元素特性

絕對(duì)定位和固定定位的塊元素和行內(nèi)元素會(huì)自動(dòng)轉(zhuǎn)化為行內(nèi)塊元素。（行內(nèi)塊元素不能使用margin:x auto來設(shè)置水平居中）

a、如果要使元素水平居中：left:50%;margin-left:-width/2

b、如果要使元素垂直居中：top:50%;margin-top:-height/2

定位元素的層級(jí)

定位元素是浮動(dòng)的正常的文檔流之上，可以用z-index屬性來設(shè)置元素的層級(jí)。（z-index值越大，層級(jí)越高）

典型定位布局：

　　a、固定在頂部的菜單

　　b、水平垂直居中的彈框

　　c、固定的側(cè)邊的工具欄

　　d、固定在底部的按鈕

a、固定在頂部的菜單（固定定位）

b、水平垂直居中的彈框（固定定位 絕對(duì)定位）

c、固定的側(cè)邊的工具欄（固定定位）

d、固定在底部的按鈕（固定定位）

?

總結(jié)

以上是生活随笔為你收集整理的css定位position的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。