為什么需要定位?CSS前端定位機(jī)制

想要實(shí)現(xiàn)盒子是固定屏幕某個(gè)位置，滾動(dòng)屏幕該盒子位置依然保持不變。浮動(dòng)可以讓多個(gè)塊級(jí)盒子一行沒有縫隙排列顯示，經(jīng)常用于橫向排列盒子。定位則是可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或者固定屏幕中某個(gè)位置，并且可以壓住其他盒子。都無(wú)法快速實(shí)現(xiàn)，此時(shí)就需要定位來(lái)實(shí)現(xiàn)。

1.定位的組成

定位：將盒子定在某一個(gè)位置，所以定位也是在擺放盒子，按照定位的方式移動(dòng)盒子。

定位= 定位模式+邊偏移。

定位模式用于指定一個(gè)元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。

2. 定位模式

定位模式?jīng)Q定元素的定位方式，它通過(guò)CSS 的position屬性來(lái)設(shè)置，其值可以分為四個(gè)：

3.邊偏移

邊偏移就是定位的盒子移動(dòng)到最終位置。有top、bottom、left 和right 4 個(gè)屬性。

4.靜態(tài)定位static

靜態(tài)定位是元素的默認(rèn)定位方式，無(wú)定位的意思。語(yǔ)法如下：

選擇器{ position: static; }

　　靜態(tài)定位按照標(biāo)準(zhǔn)流特性擺放位置，它沒有邊偏移

　　靜態(tài)定位在布局時(shí)很少用到

5.相對(duì)定位relative

相對(duì)定位是元素在移動(dòng)位置的時(shí)候，是相對(duì)于它原來(lái)的位置來(lái)說(shuō)的(自戀型)。語(yǔ)法如下：

相對(duì)定位的特點(diǎn)：

它是相對(duì)于自己原來(lái)的位置來(lái)移動(dòng)的(移動(dòng)位置的時(shí)候參照點(diǎn)是自己原來(lái)的位置)。

原來(lái)在標(biāo)準(zhǔn)流的位置繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它。

因此，相對(duì)定位并沒有脫標(biāo)。它最典型的應(yīng)用是給絕對(duì)定位當(dāng)?shù)?。?！?/p>

6.絕對(duì)定位absolute

絕對(duì)定位是元素在移動(dòng)位置的時(shí)候，是相對(duì)于它祖先元素來(lái)說(shuō)的(拼爹型)。語(yǔ)法：

選擇器{ position: absolute; }

絕對(duì)定位的特點(diǎn)：

　　如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準(zhǔn)定位(Document 文檔)。

　　如果祖先元素有定位(相對(duì)、絕對(duì)、固定定位)，則以最近一級(jí)的有定位祖先元素為參考點(diǎn)移動(dòng)位置。

　　絕對(duì)定位不再占有原先的位置。(脫標(biāo))

所以絕對(duì)定位是脫離標(biāo)準(zhǔn)流的。

如何理解盒子模型？它有哪些部分組成？

盒子模型不同邊框樣式屬性和應(yīng)用技巧講解

網(wǎng)頁(yè)一般用什么工具布局？常用的網(wǎng)頁(yè)流程布局介紹

css盒子是什么，在網(wǎng)頁(yè)中起到什么作用？

傳智教育HTML前端與移動(dòng)開發(fā)培訓(xùn)