css定位position
閑言碎語(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Bootstrap警告框
- 下一篇: Bootstrap分页