【正文】 項(xiàng)的標(biāo)志，但是該屬性只能設(shè)置常規(guī)的標(biāo)志，如圓形或者數(shù)字等。如果需要為頁面添加更吸引人的效果，我們可能會希望為列表項(xiàng)添加圖像作為標(biāo)志。這時，我們需要使用liststyleimage 屬性。liststyleimage 屬性使用圖像來替換列表項(xiàng)的標(biāo)記，通過為liststyleimage 屬性賦值一個圖像的URL來顯示圖像標(biāo)志。但是，在設(shè)置圖像標(biāo)志時，建議始終規(guī)定一個 liststyletype 屬性以定義常規(guī)標(biāo)志。這樣做的好處在于，如果圖像不存在或者因?yàn)槟撤N原因?qū)е聢D像不可用時，可以替換顯示常規(guī)標(biāo)志。6. 定位. 定位機(jī)制. 什么是定位在CSS出現(xiàn)之前，通常使用表格精確的控制頁面中內(nèi)容的位置，而且內(nèi)容以普通的流方式呈現(xiàn)，即內(nèi)容按照它們在文檔中出現(xiàn)的順序顯示。但是，通過使用CSS的定位屬性，即使不用表格，也可以實(shí)現(xiàn)頁面的精確布局，還可以讓信息顯示的順序與它們在文檔中出現(xiàn)的順序不同。雖然目前依然可以看到很多使用表格定位元素的頁面，但是使用CSS來進(jìn)行定位的趨勢將越來越強(qiáng)烈，因?yàn)樗梢允鬼撁娴膬?nèi)容有更好的可重用性，實(shí)現(xiàn)頁面和布局的真正分離。這是因?yàn)橐坏╉撁娴牟季诌^多的依賴表格，則通常頁面將僅限于顯示在最初為其設(shè)計(jì)的媒體上。隨著更多具有不同功能的設(shè)備訪問Internet，則可能更多的使用CSS來實(shí)現(xiàn)定位。CSS 有三種基本的定位機(jī)制：普通流定位、浮動和絕對定位。. 定位屬性任何元素都可以定位，只是絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型；相對定位元素會相對于它在正常流中的默認(rèn)位置偏移。CSS 所提供的用于定位的屬性如表－13 所示。表－13 CSS定位屬性其中，使用position 屬性和偏移屬性可以實(shí)現(xiàn)普通流定位（包括相對定位）和絕對定位（包括固定定位）；使用float 屬性可以實(shí)現(xiàn)浮動定位。其他屬性為輔助屬性。可以使用position 屬性指定元素的定位方式，該屬性可能的取值如表－14 所示。表－14 position屬性的取值通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。position 屬性取值為static 時，元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。static 值為默認(rèn)值，代表普通流定位模式，因此很少需要顯式地指定該值。如果指定position 屬性的值為static，則不能使用偏移屬性來修改元素框的位置，也不能使用zindex 屬性設(shè)置元素框的堆疊順序。即使設(shè)置了這些屬性，瀏覽器也會自動忽略它們（指top, bottom, left, right 和 zindex）。另外，static 值和相對定位（relative值）都是普通流定位。相對定位之所以被看作普通流定位模型的一部分，因?yàn)樵氐奈恢檬窍鄬τ谒谄胀髦械奈恢谩Ｈ绻付ㄔ乜虻亩ㄎ粰C(jī)制為默認(rèn)方式以外的其他方式，則經(jīng)常需要使用元素框偏移屬性來指示框的位置。在講解具體的定位方式之前，我們先查看這些用于偏移的屬性。CSS 中提供的元素框偏移屬性如表－15所示。表－15 CSS偏移屬性需要注意的是，如果position 屬性的值為 static，那么設(shè)置這些偏移屬性不會產(chǎn)生任何效果。. 相對定位相對定位是一個非常容易掌握的概念。如果對一個元素進(jìn)行相對定位，元素仍保持其未定位前的形狀，它原本所占的空間仍保留，只是元素框會相對于它原來的位置偏移某個距離。通過設(shè)置垂直或水平位置，讓這個元素相對于它的起點(diǎn)進(jìn)行移動。相對定位將元素相對于它在普通流中的位置進(jìn)行定位，具體的位置由偏移屬性來設(shè)置。因此，如果需要設(shè)置元素為相對定位，則首先需要設(shè)置position 屬性的值為 relative，然后使用left 屬性或者right 屬性設(shè)置水平方向的偏移量；也可以使用top 屬性或者bottom 屬性設(shè)置垂直方向的偏移量。. 絕對定位絕對定位是指將元素的內(nèi)容從普通流中完全移除，并且可以使用偏移屬性來固定該元素的位置。絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對定位不同，相對定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬τ谒谄胀髦械奈恢?。而普通流中其它元素的布局和絕對定位的元素?zé)o關(guān)。. 堆疊順序在前面的示例中我們提到過，一旦修改了元素的定位方式，則元素可能會發(fā)生堆疊。當(dāng)發(fā)生堆疊時，默認(rèn)的處理方式是第一個元素位于后面的元素下方，我們稱為堆疊上下文。對于相對定位、絕對定位和固定定位的元素框，可以使用zindex 屬性來修改堆疊上下文來控制元素框出現(xiàn)的重疊順序。如果設(shè)置zindex 屬性的值為數(shù)值，數(shù)值越大表示堆疊順序更高。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面，即元素的顯示會接近頁面表面。需要注意的是，Zindex 屬性僅能在定位元素上奏效，且可以設(shè)置為負(fù)值。zindex 屬性設(shè)置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。比如，我們定義如下樣式規(guī)則：1. div {2. zindex:100。3. height:100px。4. border:1px solid gray。5. backgroundcolor:f0f0f0。}6. p {7. height:80px。8. width:300px。9. border:2px dashed black。10. backgroundcolor:white。} 11. {12. position:relative。13. top:10px。14. left:30px。15. zindex:1。} 16. {17. position:absolute。18. top:60px。19. left:120px。20. zindex:2。} 21. advertise {22. position:fixed。23. zindex:3。24. top:120px。25. left:150px。26. width:100px。27. height:80px。28. border:1px solid gray。29. backgroundcolor:f0f0f0。30. padding:30px。31. fontsize:24px。} 然后，在頁面的主體中添加如下代碼：1. div沒有設(shè)置定位的amp。lt。divamp。gt。/div2. p class=first段落1：相對定位/p3. p class=second段落2：絕對定位/p4. div id=advertise廣告框/div上述代碼在瀏覽器中的顯示效果如圖22所示。圖22由圖－22可見，雖然設(shè)置了第一個 div 元素的zindex 屬性的值為100，為當(dāng)前頁面上的最大堆疊值，但是因?yàn)榇?div 元素沒有設(shè)置定位屬性，即為普通流模式定位，則堆疊順序無效，依然顯示在最底端；其余設(shè)置了定位屬性的元素按照其設(shè)置的堆疊順序逐一顯示。因?yàn)檫@些元素框都是重疊的，則zindex 屬性的值越大，相應(yīng)的元素框越接近于頂部（如廣告框的 div 元素位于最頂端）。. 固定定位固定定位是指將元素的內(nèi)容固定在頁面的某個位置。設(shè)置元素為固定定位后，元素不僅從普通流中完全移除，而且當(dāng)用戶向下滾動頁面時元素框并不隨著移動。固定定位元素的位置與文檔流無關(guān)，因此也不占據(jù)空間。如果需要設(shè)置元素為固定定位，則首先需要設(shè)置position 屬性的值為 fixed，可定位于相對于瀏覽器窗口的指定坐標(biāo)。元素的位置可通過 left、top、right 以及bottom 這些偏移屬性來規(guī)定。偏移屬性的取值依然和前面小節(jié)中講解的相同。一旦被設(shè)置為固定定位，不論窗口滾動與否，元素都會留在那個位置。為了演示固定定位方式，我們模擬一個常見的頁面廣告的效果。許多網(wǎng)頁經(jīng)常會有一個廣告框浮動在頁面上，而無論怎么滾動頁面，該框的位置固定在頁面的某個位置。我們可以用固定定位來模擬此效果。比如，我們定義如下樣式規(guī)則：1. advertise {2. position:fixed。3. top:30px。4. left:80px。5. width:30%。6. height:80px。7. border:1px solid gray。8. backgroundcolor:f0f0f0。9. padding:30px。10. fontsize:24px。} 11. p {12. border:2px dotted black。13. height:100px。14. backgroundcolor:pink。}然后，在頁面的主體中添加如下代碼：1. div id=advertise廣告框/div2. p段落1/p3. p段落2/p4. p段落3/p5. p段落4/p之所以在樣式中設(shè)置段落的高度為100 像素，并在頁面主體中添加多個段落元素，是為了增加頁面的長度以顯示滾動的效果。上述代碼在瀏覽器中的顯示效果如圖23所示。圖23由圖－23可見，即使頁面已經(jīng)滾動，但是灰色廣告框依然位于固定的位置，且重疊于其他元素之上。Firefox 瀏覽器和 Safari 瀏覽器已經(jīng)提供了對固定定位的支持，而 IE 瀏覽器從IE7 版本開始支持此定位方式。