在CSS中，定位（Positioning）是控制元素在頁(yè)面上如何定位和顯示的一種機制。

它主要包括四種屬性：

靜態(tài)定位（static）

相對定位（relative）

絕對定位（absolute）

固定定位（fixed）

css的定位屬性position:fixed是什么意思？position是“位置”、“放置方式”的意思，fixed是“固定的”、“不變的”的意思，那么position:fixed指的是固定定位的意思。

如果某元素添加了position:fixed屬性，會(huì )把該元素設置為固定定位，該元素會(huì )變成一個(gè)有框的空間，簡(jiǎn)單理解就是，添加了position:fixed屬性的元素，會(huì )浮起來(lái)，相對于瀏覽器窗口進(jìn)行定位。

不管這個(gè)位置新增加了什么內容，也不管這個(gè)頁(yè)面如何滾動(dòng)，這個(gè)元素都只會(huì )出現在相對于瀏覽器窗口所在的位置。

css的定位屬性position:fixed怎么用？

通過(guò)添加以下的值：left（左邊）、 top（頂部）、 right（右邊） 、 bottom（底部） 改變該元素的位置，舉例如下：

如果left設置為30像素，寫(xiě)法：left: 30px;，那么會(huì )在元素左邊創(chuàng )建30像素的空間，也就是將元素向右移動(dòng)。

如果將top設置為50px，寫(xiě)法：top: 50px;，那么框將在相對于瀏覽器窗口頂部的下面50像素的地方，也就是將元素從頂部往下增加50像素的空間。

同理，負值也是一樣，比如：

如果right設置為-20像素，寫(xiě)法：right: -20px;，那么會(huì )在元素右邊減少 20 像素的空間，也就是將元素向右移動(dòng)。

網(wǎng)友們要注意正值和負值控制的方向是相反的：

如果right設置為20像素，寫(xiě)法：right: 20px;，那么會(huì )在元素右邊增加 20 像素的空間，也就是將元素向左移動(dòng)。

如果將bottom設置為-50px，寫(xiě)法：bottom: -50px;，那么框將在相對于瀏覽器窗口底部減少50像素的空間，也就是將元素向下移動(dòng)。

如果將bottom設置為50px，寫(xiě)法：bottom: 50px;，那么框將在相對于瀏覽器窗口底部增加50像素的空間，也就是將元素向上移動(dòng)。

光是這樣看，估計網(wǎng)友們已經(jīng)看暈了，其實(shí)自己動(dòng)手設置一下值，比如：

然后，看看他的位置變化，就很清楚了，效果如圖：

為了讓網(wǎng)友們更容易理解，范如樂(lè )再上面的例子中，添加了很多行p元素，效果如圖：

這個(gè)時(shí)候，我滾動(dòng)瀏覽器的窗口，這個(gè)元素的位置也跟著(zhù)滾動(dòng)了：

從截圖可以看到，不管瀏覽器的窗口發(fā)生什么變化，該元素的位置都只會(huì )相對于瀏覽器窗口進(jìn)行定位。

官網(wǎng)地址：https://www.50yun.top

免費注冊：https://www.50yun.top/col-reg/

趕快注冊 - 創(chuàng )建自己的線(xiàn)上數字化運營(yíng)系統吧