以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

圖層重疊效果

這是您期待以久的圖層重疊效果! 在宣告圖層 我們解釋了如何設定您的圖層 的上邊界及左邊界, 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> 

上一頁:宣告圖層 下一頁:特殊效果

以下為文章回應區

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

manicure   2017/5/3 下午 09:23:00

Its such as you read my mind! You appear to grasp a lot about this,
like you wrote the e book in it or something.
I feel that you can do with some p.c. to force the message house a bit,
but other than that, that is excellent blog. A great read.
I will definitely be back.

manicure   2017/5/3 下午 04:50:00

Hello, this weekend is good in support of me, since this point in time i am reading
this fantastic informative post here at my residence.

BHW   2017/4/14 上午 02:24:00

I'm not sure where you are getting your info, but great topic.
I needs to spend some time learning much more or understanding more.
Thanks for excellent information I was looking for this info for my mission.

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