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:center 而 vertical-align:middle 垂直置中只用在表格中，雖然 line-height 亦可文字垂直置中但文字超過一行就超出框格了。

static 靜態定位(為預設值)

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

position:absolute; top:300px; left:260px; /*絕對定位*/
position:fixed; bottom:10px; right:10px; /*浮動定位*/

定位方式	relative	absolute	fixed	static
定位方式	相對定位	絕對定位	固定定位	靜態定位(預設值)
改變框格位置	是	是	是	否
自然位置流程	是	否	否	是
位置定位基準	原本的位置	父元素之邊界	以設置參數	-
調整框格大小	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>

網頁內容