【正文】 項的標志，但是該屬性只能設置常規(guī)的標志，如圓形或者數字等。如果需要為頁面添加更吸引人的效果，我們可能會希望為列表項添加圖像作為標志。這時，我們需要使用liststyleimage 屬性。liststyleimage 屬性使用圖像來替換列表項的標記，通過為liststyleimage 屬性賦值一個圖像的URL來顯示圖像標志。但是，在設置圖像標志時，建議始終規(guī)定一個 liststyletype 屬性以定義常規(guī)標志。這樣做的好處在于，如果圖像不存在或者因為某種原因導致圖像不可用時，可以替換顯示常規(guī)標志。6. 定位. 定位機制. 什么是定位在CSS出現(xiàn)之前，通常使用表格精確的控制頁面中內容的位置，而且內容以普通的流方式呈現(xiàn)，即內容按照它們在文檔中出現(xiàn)的順序顯示。但是，通過使用CSS的定位屬性，即使不用表格，也可以實現(xiàn)頁面的精確布局，還可以讓信息顯示的順序與它們在文檔中出現(xiàn)的順序不同。雖然目前依然可以看到很多使用表格定位元素的頁面，但是使用CSS來進行定位的趨勢將越來越強烈，因為它可以使頁面的內容有更好的可重用性，實現(xiàn)頁面和布局的真正分離。這是因為一旦頁面的布局過多的依賴表格，則通常頁面將僅限于顯示在最初為其設計的媒體上。隨著更多具有不同功能的設備訪問Internet，則可能更多的使用CSS來實現(xiàn)定位。CSS 有三種基本的定位機制：普通流定位、浮動和絕對定位。. 定位屬性任何元素都可以定位，只是絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型；相對定位元素會相對于它在正常流中的默認位置偏移。CSS 所提供的用于定位的屬性如表－13 所示。表－13 CSS定位屬性其中，使用position 屬性和偏移屬性可以實現(xiàn)普通流定位（包括相對定位）和絕對定位（包括固定定位）；使用float 屬性可以實現(xiàn)浮動定位。其他屬性為輔助屬性。可以使用position 屬性指定元素的定位方式，該屬性可能的取值如表－14 所示。表－14 position屬性的取值通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。position 屬性取值為static 時，元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創(chuàng)建一個或多個行框，置于其父元素中。static 值為默認值，代表普通流定位模式，因此很少需要顯式地指定該值。如果指定position 屬性的值為static，則不能使用偏移屬性來修改元素框的位置，也不能使用zindex 屬性設置元素框的堆疊順序。即使設置了這些屬性，瀏覽器也會自動忽略它們（指top, bottom, left, right 和 zindex）。另外，static 值和相對定位（relative值）都是普通流定位。相對定位之所以被看作普通流定位模型的一部分，因為元素的位置是相對于它在普通流中的位置。如果指定元素框的定位機制為默認方式以外的其他方式，則經常需要使用元素框偏移屬性來指示框的位置。在講解具體的定位方式之前，我們先查看這些用于偏移的屬性。CSS 中提供的元素框偏移屬性如表－15所示。表－15 CSS偏移屬性需要注意的是，如果position 屬性的值為 static，那么設置這些偏移屬性不會產生任何效果。. 相對定位相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，元素仍保持其未定位前的形狀，它原本所占的空間仍保留，只是元素框會相對于它原來的位置偏移某個距離。通過設置垂直或水平位置，讓這個元素相對于它的起點進行移動。相對定位將元素相對于它在普通流中的位置進行定位，具體的位置由偏移屬性來設置。因此，如果需要設置元素為相對定位，則首先需要設置position 屬性的值為 relative，然后使用left 屬性或者right 屬性設置水平方向的偏移量；也可以使用top 屬性或者bottom 屬性設置垂直方向的偏移量。. 絕對定位絕對定位是指將元素的內容從普通流中完全移除，并且可以使用偏移屬性來固定該元素的位置。絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。而普通流中其它元素的布局和絕對定位的元素無關。. 堆疊順序在前面的示例中我們提到過，一旦修改了元素的定位方式，則元素可能會發(fā)生堆疊。當發(fā)生堆疊時，默認的處理方式是第一個元素位于后面的元素下方，我們稱為堆疊上下文。對于相對定位、絕對定位和固定定位的元素框，可以使用zindex 屬性來修改堆疊上下文來控制元素框出現(xiàn)的重疊順序。如果設置zindex 屬性的值為數值，數值越大表示堆疊順序更高。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面，即元素的顯示會接近頁面表面。需要注意的是，Zindex 屬性僅能在定位元素上奏效，且可以設置為負值。zindex 屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。比如，我們定義如下樣式規(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沒有設置定位的amp。lt。divamp。gt。/div2. p class=first段落1：相對定位/p3. p class=second段落2：絕對定位/p4. div id=advertise廣告框/div上述代碼在瀏覽器中的顯示效果如圖22所示。圖22由圖－22可見，雖然設置了第一個 div 元素的zindex 屬性的值為100，為當前頁面上的最大堆疊值，但是因為此 div 元素沒有設置定位屬性，即為普通流模式定位，則堆疊順序無效，依然顯示在最底端；其余設置了定位屬性的元素按照其設置的堆疊順序逐一顯示。因為這些元素框都是重疊的，則zindex 屬性的值越大，相應的元素框越接近于頂部（如廣告框的 div 元素位于最頂端）。. 固定定位固定定位是指將元素的內容固定在頁面的某個位置。設置元素為固定定位后，元素不僅從普通流中完全移除，而且當用戶向下滾動頁面時元素框并不隨著移動。固定定位元素的位置與文檔流無關，因此也不占據空間。如果需要設置元素為固定定位，則首先需要設置position 屬性的值為 fixed，可定位于相對于瀏覽器窗口的指定坐標。元素的位置可通過 left、top、right 以及bottom 這些偏移屬性來規(guī)定。偏移屬性的取值依然和前面小節(jié)中講解的相同。一旦被設置為固定定位，不論窗口滾動與否，元素都會留在那個位置。為了演示固定定位方式，我們模擬一個常見的頁面廣告的效果。許多網頁經常會有一個廣告框浮動在頁面上，而無論怎么滾動頁面，該框的位置固定在頁面的某個位置。我們可以用固定定位來模擬此效果。比如，我們定義如下樣式規(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之所以在樣式中設置段落的高度為100 像素，并在頁面主體中添加多個段落元素，是為了增加頁面的長度以顯示滾動的效果。上述代碼在瀏覽器中的顯示效果如圖23所示。圖23由圖－23可見，即使頁面已經滾動，但是灰色廣告框依然位于固定的位置，且重疊于其他元素之上。Firefox 瀏覽器和 Safari 瀏覽器已經提供了對固定定位的支持，而 IE 瀏覽器從IE7 版本開始支持此定位方式。