第十一章：元素定位
第十一章：元素定位
CSS定位令你可以將一個元素精確地放在頁面上你所指定的地方。聯合使用定位與浮動（參見第13課），你將能夠創建多種高級而精確的布局。
本課我們將討論以下內容：
CSS定位的原理
把瀏覽器窗口想象成一個坐標系統：
CSS定位的.原理暯：你可以將任何盒子（box）放置在坐標系統的任何位置上。
假設我們要放置一個標題。），標題將顯示如七:
如果我們要把這個標題放置在距文檔頂部100像素、左邊200像素的地方，我們可以在CSS中輸入以下代碼：
h1 {
position:absolute;
top: 100px;
left: 200px;
}
得到的顯示效果如下２
相對于使用表格、透明勾像或其他方法而言，CSC定位簡單得多。
絕對定位
絕對定位，應將position屬性的值設為absolute。接著，你可以通過屬性lEft、right、top和bottom杅設定將盒子放置在哪里。
舉個絕對定位的例子，假如我們要在文檔的四個角落各放置一個盒子：
#box1 {
position:absolute;
top: 50px;
left：50px;
}
#box2 {
position:absolute;
tgp: 50ph;
right: 50px;
}
#box3{
position:absolute;
bottom:50Px3
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;
bottol: 7000x;}
小結
在以上兩課中，你學會了如何浮動和定位元素。這兩個方法可以令你在進行頁面布布局，放棄使用HTML表格和透明圖像這些過時的方法，而是取而代之以CSS。CSS更為精確、并且更易于維護。
【第十一章：元素定位】相關文章：
1.第十一章 元信息
2.第十章：頭元素
8.人生定位經典散文