為什么需要定位?CSS前端定位機制

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

1.定位的組成

定位：將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子。

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

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

2. 定位模式

定位模式?jīng)Q定元素的定位方式，它通過CSS 的position屬性來設置，其值可以分為四個：

3.邊偏移

邊偏移就是定位的盒子移動到最終位置。有top、bottom、left 和right 4 個屬性。

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

靜態(tài)定位是元素的默認定位方式，無定位的意思。語法如下：

選擇器{ position: static; }

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

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

5.相對定位relative

相對定位是元素在移動位置的時候，是相對于它原來的位置來說的(自戀型)。語法如下：

相對定位的特點：

它是相對于自己原來的位置來移動的(移動位置的時候參照點是自己原來的位置)。

原來在標準流的位置繼續(xù)占有，后面的盒子仍然以標準流的方式對待它。

因此，相對定位并沒有脫標。它最典型的應用是給絕對定位當?shù)?。。?/p>

6.絕對定位absolute

絕對定位是元素在移動位置的時候，是相對于它祖先元素來說的(拼爹型)。語法：

選擇器{ position: absolute; }

絕對定位的特點：

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

　　如果祖先元素有定位(相對、絕對、固定定位)，則以最近一級的有定位祖先元素為參考點移動位置。

　　絕對定位不再占有原先的位置。(脫標)

所以絕對定位是脫離標準流的。

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

盒子模型不同邊框樣式屬性和應用技巧講解

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

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

傳智教育HTML前端與移動開發(fā)培訓