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


css的定位屬性position:relative是什么意思?position是“位置”、“放置方式”的意思,relative是“相對的”意思,position:relative就是相對定位的意思。

如果某元素添加了position:relative屬性,會把該元素設置為相對定位,該元素會變成一個有框的空間,那么,設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀,它原本所占的空間仍保留。

如果對一個元素進行相對定位,它將出現在它所在的位置上。然后,可以通過設置垂直或水平位置,讓這個元素“相對于”它的起點進行移動。

簡單理解就是以該元素所在的位置的左上角為起點進行移動。

css的相對定位屬性position:relative怎么用?

通過添加以下的值: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:relative是什么意思?怎么用?

從截圖可以看到,通過類選擇器命名為juli2的這段文字,相對于自己正常所在的位置,在樣式left:30px;的影響下,向元素的原始左側位置增加了30像素。在樣式top:50px;的影響下,向元素的原始頂部位置增加了50像素。

網友們需要注意的是,在使用相對定位時,無論是否進行移動,元素仍然占據原來的空間。因此,移動元素會導致它覆蓋其它框。

簡單理解就是,某元素使用了相對定位之后,它的這個位置不會隨著頁面的其它元素而改變,為了讓網友們更容易理解,范如樂在上面的例子中,添加了很多行p元素,效果如圖:

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

從截圖可以看到,就算添加了其它元素,該相對定位的元素還是死死的在哪里一動不動,就算滾動頁面,也是一動不動的,同時也會覆蓋其它的元素。

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

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

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

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




熱門文章: