CSS 樣式CSS position absolute 物件定位讓網頁元素置中
position:fixed position:absolute

CSS 物件定位方式

定位的方式有固定和浮動使用定位,可以在網頁佈局中將元素的框格與框格重疊或 讓網頁元素置中

position: relative, absolute, fixed, static*

relative 相對定位

position:relative; top:20px; left:20px;

以該元素框格原本的正常位置加上 top, right, bottom, left 所設定的相對距離,而移動到結果的的位置。框格區塊以相對方式依其元素的位置來定位,其後的元素框格會忽略它的定位,但即使被移動了它仍佔有原始的位置。所以設定 relative top, bottom 的框格是可以重疊。

position:relative; top:-10px; left:20px;

static

relative positioning

position:relative 相對定位, margin 外邊距

相對定位 (relative) 依所設定的相對距離而移動到結果位置。但是它不會影響其後在頁面自然流程中的元素。而邊距 (margin) 在會推擠其後的元素改變它們的自然位置,因此影響其後元素的佈局。


absolute 絕對定位

元素框格的位置用 top, right, bottom, left 設定,其距離是相對於父元素內容區邊界。絕對定位 absolute 元素對其它元素的佈局沒有影響,可以將元素放在版面中 其距離是以上一層的父元素位置計算為準,例如使用在項目下拉選單中的效果。

position:absolute; top:50%; left:50%;

以絕對定位讓元素置中、結果在文件中央就整頁高度來計算,但需要將移動元素的高度及寬度考量進去,移動坐標扣除元素的高及寬因位置基準點和元素中心點之差異。



fixed 浮動定位

元素框格的位置用浮動定位 top, right, bottom, left 設定,元素會固定在設定值上、而不隨頁面捲動的內容(如右下方之圖片)。浮動定位會固定於其視窗;在分頁上會固定於分頁 fixed 元素因其固定所以對其它元素的佈局沒有影響,設定值可為負數,不指定時於原本自然流程的位置。

position:fixed; top:50%; left:50%;

以浮動定位讓元素置中、top:50%; left:50% 結果將是以視窗來計算中央點。在容器內的水平置中直接用 text-align:centervertical-align:middle 垂直置中只用在表格中,雖然 line-height 亦可文字垂直置中但文字超過一行就超出框格了。


static 靜態定位(為預設值)

元素依照正常流程佈局,該元素出現在文檔的常規位置不會重新定位。通常此屬性值可以不設置。

position:absolute; top:300px; left:260px; /*絕對定位*/
position:fixed; bottom:10px; right:10px; /*浮動定位*/
定位方式relativeabsolutefixedstatic
相對定位絕對定位固定定位靜態定位(預設值)
改變框格位置
自然位置流程
位置定位基準原本的位置父元素之邊界以設置參數-
調整框格大小display:block (是)
display:inline (否)
display:block (是)
display:inline (否)


IE6 不支援 margin:0 auto

使用 margin:0 auto 可以讓子元素 div-child 位置居中但在 IE6 瀏覽時就跑到左邊了。div-father 父元素的樣式加入 _text-align:center 再於子元素的樣式加入 _text-align:left 恢復。 其中 CSS 加入 _ 底線只讓 IE6 讀取其他版本瀏覽器則略過。

.div-father{_text-align:center; background-color:#f6f9fc;}
.div-child{width:680px;margin:0 auto; _text-align:left;}
<div class="div-father">
  <div class="div-child">網頁內容</div>
</div>

網頁內容

Modification in