第十四課：元素的位置

用CSS定位，可以將元素精確的放置在網頁任何地方。與floats結合應用，positioning能給予你創建高級和精確樣式的更多可能性。下面是本課將討論的課題：

CSS的positioning概念
絕對positioning
相對positioning

CSS定位的原理

把瀏覽器窗口想象成一個坐標系統：

CSS定位的概念是可以將任何box放置在坐標系統中的任何位置。假設我們想定位一個標題。使用箱體模式可以讓標題顯示為：

如果我們想讓標題出現在文檔上部起100px，左起200px的地方，可以輸入以下CSS

code>
h1 {
position:absolute;
top: 100px;
left: 200px;
}

如你所見，用CSS定位是布置元素非常精確的技術。它比使用tables，“transparent images”和其它方法更容易。

絕對位置

在文件中，被絕對定位的元素不會留下任何空間。藥絕對定位元素，應將特性position設為absolute。隨后可以用特性left，right，top和bottom定位箱體。作為一個絕對定位的實例，我家將在文本的每個角放置一個箱體。

#box1 {
position:absolute;
top: 50px;
left: 50px;
}

#box2 {
position:absolute;
top: 50px;
right: 50px;
}

#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}

#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}

相對位置

藥定位一個元素的相對位置，可以將特性position設置為relative。絕對與相對的區別是位置的計算方式。一個元素的相對位置計算是從文檔的起始位置開始。這意味著將元素移動到右邊，左邊，上邊或下邊。用這種方法，元素在定位后仍然在文檔中獲得一個空間。在下面這個相對位置的實例，將嘗試將三個圖片基于網頁的原始位置定義相對位置。注意圖片是如何留下空間的。

#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}

#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}

總結

你從前面兩課學習了怎樣用float和position定位原始。這兩種方法給你更多設計網頁的選擇，而不必使用傳統HTML的tables和透明圖片。它更精確和先進，并且也容易維護。