css如何進(jìn)行定位

這篇文章給大家分享的是有關(guān)css如何進(jìn)行定位的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

css的全稱(chēng)是什么

css的全稱(chēng)是Cascading Style Sheets（層疊樣式表），它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

css進(jìn)行定位的方法：首先使用position屬性指定元素的定位類(lèi)型（靜態(tài)定位、絕對(duì)定位、相對(duì)定位或固定定位）；然后使用left，top，right，bottom屬性調(diào)整元素的位置即可。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

什么是定位：

css中的position屬性，position有四個(gè)值：absolute/relative/fixed/static(絕對(duì)/相對(duì)/固定/靜態(tài)(默認(rèn)))通過(guò)定位屬性可以設(shè)置一些不規(guī)則的布局，使用TLBR(top,left,bottom,right)來(lái)調(diào)整元素位置。

各個(gè)屬性值的描述：

• static(靜態(tài)) 沒(méi)有特別的設(shè)定，不脫離文檔流，遵循基本的定位規(guī)定，不能通過(guò)z-index進(jìn)行層次分級(jí)，在普通流中，各個(gè)元素默認(rèn)的屬性。

• relative(相對(duì)定位) 對(duì)象不可層疊、不脫離文檔流，參考自身靜態(tài)位置通過(guò) top,bottom,left,right 定位。

• absolute(絕對(duì)定位) 脫離文檔流，通過(guò) top,bottom,left,right 定位。選取其最近一個(gè)最有定位設(shè)置的父級(jí)對(duì)象進(jìn)行絕對(duì)定位，如果對(duì)象的父級(jí)沒(méi)有設(shè)置定位屬性，absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位。

• fixed（固定定位）脫離文檔流，這里所固定的參照對(duì)像是可視窗口而并非是body或是父級(jí)元素。使用了fixed的元素不會(huì)隨著窗口的滾動(dòng)而滾動(dòng)。屬于absolute的子集。

各個(gè)屬性值的具體作用：

A.static：（靜態(tài)，默認(rèn)的屬性）通常情況下都不會(huì)使用，但是會(huì)存在有些場(chǎng)景，就是你想把position的值從其他值修改成默認(rèn)時(shí)使用。

B.relative：（相對(duì)定位）一個(gè)元素設(shè)定了position:relative，因?yàn)槠洳幻撾x文本流，如果不設(shè)置TLBR(top,left,bottom,right)的話，它的位置不會(huì)被改變，且不會(huì)影響當(dāng)前布局，相當(dāng)于沒(méi)事發(fā)生一樣。如果設(shè)置了TLBR后，元素就可以向指定的方向偏移，但是他原有的位置還是占據(jù)著的，例子如圖：

圖一：對(duì)child-1 設(shè)置了position：relative

圖二：再對(duì)child-1 調(diào)位置 top：20px left：20px

C.absolute: (絕對(duì)定位)，完全脫離文本流（普通流），原來(lái)的位置不再占有，且可以設(shè)置TLBR任意移動(dòng)；

特別說(shuō)明一下，對(duì)元素設(shè)置了absolute后，其父級(jí)元素都沒(méi)有設(shè)置position：absolute/relative/fixed其會(huì)以body為父級(jí)。

圖一：

圖二：

圖三：

D.fixed：(固定定位),不會(huì)隨著頁(yè)面滾動(dòng)而滾動(dòng)，這里就不貼圖了，最形象的就是那些網(wǎng)頁(yè)小廣告，你滾動(dòng)頁(yè)面，但是它一直在網(wǎng)頁(yè)的右邊或左邊，死跟著你。

定位布局技巧：position：relative 與 position：absolute 結(jié)合使用:

上面提到如果對(duì)元素設(shè)置了absolute后，其父級(jí)元素都沒(méi)有設(shè)置position：relative，其會(huì)以body為父級(jí)。這樣的話我們?cè)撛囟ㄎ坏轿覀兊哪繕?biāo)位置將很困難，量像素麻煩。圖片說(shuō)明：

圖一：初始狀態(tài)

圖二：對(duì)box-chd-chd設(shè)置position：absolute 并設(shè)置 top：0， left:0 可以看到它從body作為父級(jí)，會(huì)以最左上角作為起點(diǎn)

圖三：對(duì)box 設(shè)置position：relative，可以看到此時(shí)box-chd-chd以box作為父級(jí)

圖四：再對(duì)box-chd 設(shè)置position：relative，可以看到box-chd-chd以box-chd作為父級(jí)

可以看出，當(dāng)子代設(shè)置了position：absolute后，其父級(jí)那個(gè)設(shè)置了position：relative，這個(gè)子代就會(huì)從該父級(jí)元素最左上方作為起點(diǎn)移動(dòng)，并且遵循就近原則，即子代向上找父級(jí)，當(dāng)找到第一個(gè)有父級(jí)設(shè)置了relative就以它最左上方作為起點(diǎn)。

relative 與 absolute 結(jié)合的方式，對(duì)定位布局起到了便利，需要移動(dòng)的距離也得到縮小，不用從body開(kāi)始整個(gè)頁(yè)面來(lái)量取像素，同時(shí)也方便管理，結(jié)構(gòu)清晰。

感謝各位的閱讀！關(guān)于“css如何進(jìn)行定位”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！