2.8  定位元素

Web頁(yè)面中的元素位置就是它們?cè)谖臋n中的位置，但可以通過(guò)將元素的position屬性由默認(rèn)的static改為absolute、relative或fixed來(lái)移動(dòng)它們。

絕對(duì)定位的元素從文檔中移除后，其他任何可能的元素將流入其空出的空間。然后，可使用top、right、bottom和left屬性將該對(duì)象定位到文檔中的任意位置。之后它將位于其他元素之上或之下。

例如，要將ID為object的對(duì)象移至從文檔開始處向下100像素，距離左邊200像素的一個(gè)絕對(duì)位置，可以對(duì)其應(yīng)用下列規(guī)則(也可使用CSS支持的任一度量單位)：

#object {

position:absolute;

top  :100px;

left  :200px;

}

同樣，也可以相對(duì)于對(duì)象在常規(guī)(或普通)文檔流中占據(jù)的位置移動(dòng)它。例如，要將object從常規(guī)位置向下移10像素，向右移10像素，可使用下列規(guī)則：

#object {

position:relative;

top  :10px;

left  :10px;

}

最后一個(gè)定位屬性設(shè)置可將對(duì)象移到一個(gè)絕對(duì)位置，但只是在當(dāng)前瀏覽器視口中。然后，當(dāng)文檔滾動(dòng)時(shí)，對(duì)象保持在原來(lái)的位置，而主文檔在其后面滾動(dòng)——這是創(chuàng)建?？繖诤推渌愃圃O(shè)計(jì)的強(qiáng)大方法。例如，要將object固定到瀏覽器窗口的左上角，可使用下列規(guī)則：

#object {

position:fixed;

top  :0px;

left  :0px;

}

圖2-3顯示了一個(gè)簡(jiǎn)單的?？織l，其創(chuàng)建方法是對(duì)position屬性使用fixed值，將圖標(biāo)在屏幕底部對(duì)齊。通過(guò)少量JavaScript或CSS專有的轉(zhuǎn)換，可使圖標(biāo)在鼠標(biāo)劃過(guò)時(shí)改變大小，而且之后的圖標(biāo)也是如此。可參見(jiàn)本書作者的Plug-in JavaScript(McGraw-Hill Professional，2010)一書，了解這個(gè)和其他許多純JavaScript插件。

圖2-3  使用position屬性創(chuàng)建一個(gè)簡(jiǎn)單的?？繖?/p>