css的定位屬性position:fixed是什么意思?怎么用?


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

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

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

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

通過添加以下的值:left(左邊)、 top(頂部)、 right(右邊) 、 bottom(底部) 改變該元素的位置,舉例如下:

如果left設置為30像素,寫法:left: 30px;,那么會在元素左邊創建30像素的空間,也就是將元素向右移動。

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

同理,負值也是一樣,比如:

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

網友們要注意正值和負值控制的方向是相反的:

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

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

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

光是這樣看,估計網友們已經看暈了,其實自己動手設置一下值,比如:

css的定位屬性position:fixed是什么意思?

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

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

從截圖可以看到,通過類選擇器命名為juli2的這段文字,相對于瀏覽器窗口進行了位置的改變,在樣式left:30px;的影響下,向瀏覽器窗口的左側位置增加了30像素。在樣式top:50px;的影響下,向瀏覽器窗口的頂部位置增加了50像素。

而且這個位置會隨著瀏覽器窗口的滾動而滾動,為了讓網友們更容易理解,范如樂在上面的例子中,添加了很多行內容為abcd的p元素

為了讓網友們更容易理解,范如樂再上面的例子中,添加了很多行p元素,效果如圖:

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

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

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

如需了解更多定位屬性的用法,詳情點擊:《css的position屬性值有哪些?有何區別?》。

轉載時需注明來源!首發:如樂建站之家;原文鏈接:
http://www.lmaocr.com/css/8154.html
如樂建站之家創始人——范如樂:

如樂建站之家創始人范如樂  聯系Q Q:349142701
  聯系微信:349142701
  聯系電話:13189611692

【如樂建站之家】由范如樂于2013年創建至今,立志于解決新手不會快速自己建網站的痛苦,讓你也能零基礎快速學會自己建網站!詳細教程點擊下圖:




熱門文章: