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

它主要包括四種屬性：

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

相對定位（relative）

絕對定位（absolute）

固定定位（fixed）

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

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

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

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

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

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

如果將top設(shè)置為50px，寫法：top: 50px;，那么框?qū)⒃谙鄬τ跒g覽器窗口頂部的下面50像素的地方，也就是將元素從頂部往下增加50像素的空間。

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

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

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

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

如果將bottom設(shè)置為-50px，寫法：bottom: -50px;，那么框?qū)⒃谙鄬τ跒g覽器窗口底部減少50像素的空間，也就是將元素向下移動。

如果將bottom設(shè)置為50px，寫法：bottom: 50px;，那么框?qū)⒃谙鄬τ跒g覽器窗口底部增加50像素的空間，也就是將元素向上移動。

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

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

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

這個時候，我滾動瀏覽器的窗口，這個元素的位置也跟著滾動了：

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

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

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

趕快注冊 - 創(chuàng)建自己的線上數(shù)字化運營系統(tǒng)吧