CSS定位方式

css定位方式

css中關於定位的屬性：position

其中position包含的屬性值主要有五種：static/relative/absolute/fixed/sticky

一：static靜態定位

static是position的預設定位方式，當你省略position屬性，遊覽器會預設定位方式為static。

遊覽器會按照正常的頁面流來放置，也就是按照正常的原始碼順序放置區塊，其中每個區塊會單獨佔據佔據一塊區域，不會發生重疊。

二：relative相對定位

relative定位參照物為自身，即參照自身做位置的偏移，它需要借助left/right/top/bottom四個屬性來指定偏移的位置。

當元素設定相對定位relative後，它的區塊在頁面上的顯示位置會發生偏移，可能完全遠離自身的先前位置，但遊覽器還會替它保留原先的位置，不會發生後邊的區塊替補的情況。

舉例來說就像是教室中一人一桌，但下課時間，學生出去解決生理或心理問題不在座位上，也不會有其他學生佔據原本屬於他的位置。

因此，相對定位並不會影響整個文字流的順序。

三：absolute絕對定位

擁有absolute定位的元素的參照物為必須有父元素，且父元素必須具有除static之外的定位，否則absolute定位參照物將會變為整個網頁。

與relative相對定位相同的是它也需要借助left/right/top/bottom四個屬性來指定偏移的位置。

當元素設定absolute絕對定位後，它的位置將會參照父元素產生，脫離原先的文字順序，在頁面中乙個新的地方顯示。遊覽器將會安排後邊的區塊進行替補。

參照之前的舉例，相對定位指的是學生暫時離開自己的座位，位置依舊會屬於他。而現在班主任需要按照成績排名重新排座，他讓先前的那名同學搬去教室裡的第三列第四排，此時，第三列第四排的參照物就是整個教室，而當該名同學搬離他的位置之後，原本屬於他的座位將不會為他保留，而是會安排給新的同學。

因此，絕對定位的元素會脫離文件流，不佔據原本的位置。

四：fixed固定定位

fixed固定定位以遊覽器視窗做參照，他會佔據視窗的一部分，脫離整個文件流，不隨頁面滾動而發生上移下移。

搭配left/right/top/bottom四個屬性使用，代表定位在頁面視窗的某個位置，以後將始終處於該位置。

固定定位fixed相當於教室內固定安裝的投影裝置，不論教室內學生如何變換位置，投影裝置始終佔據乙個教室上方的固定位置。

也就是說，fixed固定定位的元素會脫離文件流，不佔據頁面位置，且始終不發生位置變化。

五：sticky黏性定位

sticky定位是fixed與relative兩種定位方式的合併。

其功能為：當sticky定位的位置沒有超出遊覽器視窗的範圍，按照relative執行，當隨著頁面滾動，定位元素的位置即將超出遊覽器視窗時，則會改為按照fixed執行，將該定位元素固定在頁面頂部或底部。

例如購物網頁的搜尋欄

當滾動條向下翻滾，搜尋條即將滑出顯示視窗時，它就會固定在視窗頂部，而當搜尋條還在頁面中時，則會隨著滾動條翻滾而上下移動。

sticky定位必須搭配left/right/top/bottom四個屬性，否則將等同於relative。