圖層重疊效果

這是您期待以久的圖層重疊效果! 在宣告圖層我們解釋了如何設定您的圖層的上邊界及左邊界， CSS 位置層級使用 z-index 屬性來讓圖層有上下層之分，正常來說，如果您的多份圖層都在同一位置時，後來的物件會蓋過先前的物件。但使用 CSS 屬性一覽表您可以指定某一份圖層在其他圖層之上或之下，或是改變其上下的順序。 (按； SS本身就有重疊的含意，前面所講的都只限於 SS-style sheet 的部份，而且只用來定義樣式體裁，事實上可以定義一個 style sheet 用來當作是一頁，您要轉不過來，就當作是寫一頁新的網頁就好了，利用 Cascading 的特性，就是 z-index 屬性及 visibility 屬性來控制顯示與否與圖層的上下層關係。)

下面的例子，兩行字幾乎在同一位置，(第二行比第一行低10pixels) 正常來說，第二行文字會壓在第一行文字之上，但是我們設了 z-index

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
.over
       {
       position: absolute;
        top: 165px;
        left: 20px;
        z-index: 2;
        background-color: green
        }

.under
        {
        position: absolute;
        top: 175px;
        left: 20px;
        z-index: 1;
        background-color: blue
        }
-->
</STYLE>
</HEAD>

<BODY>

<SPAN class="over">這段文字距離視窗左邊 20 點,上邊 165 點</SPAN>
<SPAN class="under"> 這段文字則是接在前一段文字之"下"注意到有些字被遮住了, 我們也可以改變讓這段文字壓在前一段文字之上, 技巧在於改變 z-index 的值</SPAN>
</BODY>
</HTML>

上一頁:宣告圖層

下一頁:特殊效果

同意轉載，不過麻煩看一下轉載需知

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

圖層重疊效果

以下為文章回應區