Position定位設定

透過設定position,便能讓我們隨意移動元素的位置

很多人都會用圖層來製作網頁,常會聽到所謂的絕對位置和相對位置。
其實它們都是CSS中position的設定值,透過設定position,便能讓我們隨意移動元素的位置

一、position 參數說明

static (預設值):

(1)元素position屬性默認值為static

(2)position:statics則top、bottom、left、和 right 的值都無意義

(3)通常此屬性可不設置,除非要覆蓋之前的定義

absolute:

(1)這代表元素會被放在瀏覽器內的某個位置

(依 top、bottom、left、和 right 的值而定)。

(2)當使用者將網頁往下拉時,元素也會跟著改變位置。

relative:

(1)這代表元素被放的地方將會與預設的地方有所不同。

(2)不同的程度是依照 top、bottom、left、和 right 的值而定。

fixed:

(1)這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。

(2)當使用者將網頁往下拉時,元素的位置不會改變。

二、掌握CSS定位

relative相對位置

1.設置position:relative,可結合top、bottom、left、right屬性來偏移其常規位置。

例如:div-abc向下移動50像素、向左移動50像素

2.每個元素在頁面中會有【佔用】一個位置,而相對定位就是將元素偏離元素的預設位置,但普通流中依然保持著原有的位置,並沒有脫離流,只是視覺上發生的偏移

3.同時設定margin屬性時仍然有效,導致加成元素位置相對位置,故建議設置position:relative不要同時設置margin資料,因很難精確元素的定位,儘量減少干擾因素

absolute(絶對位置)

將元素放在任何想放的位置

(1)畫面位置參考基準:父元素內容區邊界

(2)依循著父元素來確定【根】,然後相對這個【根】元素來偏移

(3)所有父元素都沒有設置position屬性值 則該元素最終將對body進行位置偏移

 

End