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


css的定位屬性position:absolute是什么意思?position是“位置”、“放置方式”的意思,absolute是“絕對的”的意思,那么position:absolute指的是絕對定位的意思。

如果某元素添加了position:absolute屬性,會把該元素設置為絕對定位,該元素會變成一個有框的空間,具體定義是這樣的:

設置為絕對定位的元素框從文檔流完全刪除,并相對于其包含塊定位,包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉,就好像該元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。

簡單理解就是:絕對定位的元素的位置相對于最近的已定位祖先元素(父元素),如果元素沒有已定位的祖先元素(父元素),那么它的位置相對于最初的包含塊。

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

通過添加以下的值: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像素的空間,也就是將元素向上移動。

光是這樣看,估計網友們已經看暈了,范如樂還是舉例說明吧:

先在body元素里面寫幾個簡單的p元素,其中一個p元素通過類選擇器命名為juli2,然后給樣式juli2設置一個絕對定位:

.juli2 {position: absolute;
left: 30px;
top: 50px;
}

然后你就能看到這個p元素的位置發生了改變:

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

我們可以看到這個樣式為juli2的p元素相對于body元素進行了絕對定位,你可以簡單為body是這個p元素的最初的包含塊。

這就是上面提到的:“絕對定位的元素的位置相對于最近的已定位祖先元素(父元素),如果元素沒有已定位的祖先元素(父元素),那么它的位置相對于最初的包含塊“。

那么“絕對定位的元素的位置相對于最近的已定位祖先元素(父元素)”這句話又怎么理解呢?

很簡單,我們給這個p元素添加一個祖先元素(父元素),假設范如樂這里加上一個div元素,通過類選擇器命名為juli3,然后給樣式juli3設置寬度為500像素,高度為500像素,再設置一個絕對定位:

.juli3 {position: absolute;
left: 30px;
top: 50px;
width:500px;
height:500px;
}

然后你就能看到這個div元素的位置發生了改變,并且上例中的p元素也受到這個div(父元素)的影響而發生了位置的變化:

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

這里的div元素就是這個p元素的祖先元素(父元素)。

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

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

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

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




熱門文章: