Board logo

標題: [教學] (教學第35篇) 堆疊 上篇 [打印本頁]
作者: 小誌    時間: 2010-5-20 15:30     標題: (教學第35篇) 堆疊 上篇

認識堆疊
CSS除了可以用來設定網頁文字的大小、樣式、字型與顏色外，我們還可以利用CSS以圖素(像素)為單位來將文字字串安排在多層次的版面上，這就是所謂的堆疊，比較理論複雜的說法就是所謂的「z-index」，以3D立體來說：我們可以將文字平面(或是圖片平面)當成水平X軸與垂直Y軸所構成的平面，而'z-index'就是指Z軸上的座標位置。

當我們要訂定一個網頁中的文字內容或圖片絕對位置時，我們必須遵守CSS所定位置標準：’top’與’left’(以圖素(像素,px)為單位)，舉例來說：我們要將某一文字字串放在瀏覽器視窗從左邊緣算來第60個像素的位置，從上邊緣算來第100個像素的位置，則我們應該指定’top’為100與’left’為60。

[attach]777[/attach]

看到了上圖所呈現的文字字串堆疊效果覺得很棒吧！這個效果是如何做出來的呢？複習一下前面章節的介紹，同時將本節的新CSS性質屬性加入利用，我們Step By Stype 的來實做一下：



輕輕鬆鬆完成我們第一個利用堆疊屬性所製作的文字疊層效果。

[attach]778[/attach]
  1. <html>
  2. <HEAD>
  3. <title>堆疊效果範例１</title>
  4. <STYLE>
  5. BODY {background:#008800}
  6. .layer1
  7. {
  8.         position:absolute;
  9.         top:20px;
  10.         left:30px;
  11.         z-index:1;
  12.         font-size:24pt;
  13.         font-family:標楷體;
  14.         color:#FFFFFF
  15. }
  16. .layer2
  17. {
  18.         position:absolute;
  19.         top:40px;
  20.         left:120px;
  21.         z-index:2;
  22.         font-size:12pt;
  23.         font-family:標楷體
  24. }

  26. </STYLE>
  27. </HEAD>
  28. <BODY>
  29. <P class="layer1">第一層的文字字串</P>
  30. <P class="layer2">第二層的文字字串</P>
  31. </BODY>
  32. </html>
複製代碼
作者: 小誌    時間: 2010-5-20 15:32

不僅是文字字串可以做層次的堆疊，其實圖片也可以做不同層次的堆疊！

[attach]779[/attach]
  1. <html>
  2. <HEAD>
  3. <title>堆疊效果範例２</title>
  4. <STYLE>
  5. .map1
  6. {
  7.         position:absolute;
  8.         top:20px;
  9.         left:30px;
  10.         z-index:1;
  11. }
  12. .map2
  13. {
  14.         position:absolute;
  15.         top:50px;
  16.         left:100px;
  17.         z-index:2;
  18. }
  19. </STYLE>
  20. </HEAD>
  21. <BODY>
  22. <img src="webusedmap1.gif" class="map1">
  23. <img src="webusedmap2.gif" class="map2">
  24. </BODY>
  25. </html>
複製代碼
看過了「文字堆疊」與「圖片堆疊」的範例後，你是不是發現有一個屬性很重要？就是那個『z-index』屬性ㄚ，『z-index』屬性將決定那一個堆疊元件該在上方，而那一個堆疊元件又該在下方，注意喔！z-index屬性值越大的堆疊排列的順序會在越上層！



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)