以下為本站文章分類清單

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

以下為本頁本文內容

宣告圖層

使用一個圖層前,您必需宣告位置是相對於流覽器視窗或絕對位置:

#layer1 { position: absolute }

再來加入其他圖層的屬性 (屬性參閱 CSS 屬性一覽表 for available properties and values). For instance, the following code places <H1> text inside a box that's 150 pixels from the top of the page and is 200 pixels wide by 200 pixels high:

#layer1 { position: absolute; top: 150px; width: 200px; height: 200px } 

當然,您可能不希望所有 <H1> 標籤都顯示在同樣的位置。先前我們提到的 應用在文件中 及 <DIV> 和 <SPAN> 標籤就變的非常有用。 例如: 下列程式碼放在 <DIV> 標籤中,以絕對位置顯示在本頁中

<DIV style="position: absolute; top: 150px; width: 200px; height: 200px; background-color: red">紅色背景文字,範圍是 200x200 點,距離現在的視窗上邊界有150點 </DIV>

絕對位置由流覽器視窗的邊界開始算, 當使用相對位置放置文字或圖案在該文件上時,整份文件若有異動位置時,您可以不必 再去一個一個物件指定其位置。

下面的例子, 第一行文字就是正在顯示在網頁中的文字 第二行放在 <SPAN> 名為 offset 的圖層下, 會在第一行文字下 50 pixels 右 25 pixels 處顯示 (屬性 top 和 left 用來指定邊界)

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
#offset
       {
        position: relative; 
        top: 50px;
        left: 25px
        }
-->
</STYLE>
</HEAD>

<BODY> 這段文字正常的顯示在本頁中, 下一行文字則會由本行的尾端繼續接下去  

<SPAN id="offset">接的位置是距離上一行 50 點向右移 25 點</SPAN> 
</BODY> 
</HTML>

上一頁:CSS中圖層的定義 下一頁:圖層的重疊效果

以下為文章回應區

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

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

Thanks a lot for sharing this with all of us you actually realize what you are
speaking approximately! Bookmarked. Please also talk over with
my site =). We may have a link exchange agreement between us

bruce   2008/8/5 上午 11:42:00

[補充]:我找到了,在你的文章 [解決 Flash 蓋住彈出目錄的方法],謝謝!!

bruce   2008/8/5 上午 11:35:00

您好,依據上述的確可以設計出圖層效果。我想請問一下,此種圖層是否可以做出 table(在頂層顯示) 和 flash(在底層顯示)的效果!

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