第十一章：元素定位
第十一章：元素定位
CSS定位令你可以將一個(gè)元素精確地放在頁面上你所指定的地方。聯(lián)合使用定位與浮動(dòng)（參見第13課），你將能夠創(chuàng)建多種高級(jí)而精確的布局。
本課我們將討論以下內(nèi)容：
CSS定位的原理
把瀏覽器窗口想象成一個(gè)坐標(biāo)系統(tǒng)：
CSS定位的.原理暯：你可以將任何盒子（box）放置在坐標(biāo)系統(tǒng)的任何位置上。
假設(shè)我們要放置一個(gè)標(biāo)題。），標(biāo)題將顯示如七:
如果我們要把這個(gè)標(biāo)題放置在距文檔頂部100像素、左邊200像素的地方，我們可以在CSS中輸入以下代碼：
h1 {
position:absolute;
top: 100px;
left: 200px;
}
得到的顯示效果如下２
相對(duì)于使用表格、透明勾像或其他方法而言，CSC定位簡(jiǎn)單得多。
絕對(duì)定位
絕對(duì)定位，應(yīng)將position屬性的值設(shè)為absolute。接著，你可以通過屬性lEft、right、top和bottom杅設(shè)定將盒子放置在哪里。
舉個(gè)絕對(duì)定位的例子，假如我們要在文檔的四個(gè)角落各放置一個(gè)盒子：
#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;
}
相對(duì)定位
要對(duì)元素進(jìn)行相對(duì)定位，應(yīng)將position尞性的值設(shè)為relative。絕對(duì)宒位與相對(duì)定位的區(qū)別在于計(jì)算位置的方式。
采用相對(duì)定位的元素，其位置是相對(duì)于在文檔中的原始位置計(jì)算而來的。這意味著，相對(duì)定位昏通迃將元素從原來的位置向右、向左、向上或向下移動(dòng)?xùn)f定位的。采用相對(duì)定位的元素會(huì)獲得相應(yīng)的空間。
舉個(gè)相對(duì)的例子，我們可以相對(duì)于三張圖片在頁面上的原始位置對(duì)它們進(jìn)行相對(duì)定位。注意這些圖片將在文檔中各自的原始位置處留下空位。
#dog1{
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottol: 7000x;}
小結(jié)
在以上兩課中，你學(xué)會(huì)了如何浮動(dòng)和定位元素。這兩個(gè)方法可以令你在進(jìn)行頁面布布局，放棄使用HTML表格和透明圖像這些過時(shí)的方法，而是取而代之以CSS。CSS更為精確、并且更易于維護(hù)。
【第十一章：元素定位】相關(guān)文章：
1.第十一章 元信息
2.第十章：頭元素