CSS position absolute 物件定位讓網頁元素置中 | position absolute意思
網頁設計CSS定位的方式有固定和浮動使用定位,CSS物件的定位方式可以影響框格區塊在網頁上的排列和顯示。可以在網頁佈局中將元素的框格與框格重疊或讓網頁元素置中[1]position:relative,absolute,fixed,static*relative相對定位relative相對定位方式會讓物件相對於它原本的位置移動,但不會影響其他物件的位置。可以使用top,right,bottom,left屬性來指定物件的偏移量。position:relative;top:20px;left:20px;以該元素框格原本的正常位置加上top,right,bottom,left所設定的相對距離,而移動到結果的的位置。框格區塊以相對方式依其元素...
網頁設計 CSS 定位的方式有固定和浮動使用定位,CSS 物件的定位方式可以影響框格區塊在網頁上的排列和顯示。可以在網頁佈局中將元素的框格與框格重疊或 讓網頁元素置中[1]
position: relative, absolute, fixed, static*
relative 相對定位relative 相對定位方式會讓物件相對於它原本的位置移動,但不會影響其他物件的位置。可以使用 top, right, bottom, left 屬性來指定物件的偏移量。
position:relative; top:20px; left:20px;以該元素框格原本的正常位置加上 top, right, bottom, left 所設定的相對距離,而移動到結果的的位置。框格區塊以相對方式依其元素的位置來定位,其後的元素框格會忽略它的定位,但即使被移動了它仍佔有原始的位置。所以設定 relative top, bottom 的框格是可以重疊。
position:relative; top:-10px; left:20px;
static
position:relative 相對定位, margin 外邊距相對定位 (relative) 依所設定的相對距離而移動到結果位置。但是它不會影響其後在頁面自然流程中的元素。而邊距 (margin) 在會推擠其後的元素改變它們的自然位置,因此影響其後元素的佈局。
absolute 絕對定位元素框格的位置用 top, right, bottom, left 設定,其距離是相對於父元素內容區邊界。絕對定位 absolute 元素對其它元素的佈局沒有影響,可以將元素放在版面中 任何的位置其距離是以上一層的父元素位置計算為準,例如使用在項目下拉選單中的效果。
position:absolute; top:50%; left:50%;以絕對定位讓元素置中、結果在文件中央就整頁高度來計算,但需要將移動元素的高度及寬度考量進去,移動坐標扣除元素的高及寬因位置基準...