CSS單元的位置和層次-div標籤

　　我們都知道，在網頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標籤和隱式GIF圖象，即使這樣也不能保證定位的精確，因為瀏覽器和操作平台的不同會使顯示的結果發生變化。
　　而CSS能使你看到希望的曙光。利用今天我們即將學到的CSS屬性，你可以精確地設定要素的位置，還能將定位的要素疊放在彼此之上，還有...還有......你自己慢慢看吧！
　　Cascading Style Sheets（CSS）是 DHTML 的基礎。CSS 用來設定你網頁上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一個擴充，它可用來控制任何東西在網頁上或是說在視窗中的位置。請你記住這兩個名詞：CSS 和 CSS－P。下面四個英文網址提供了詳細的關於 CSS 和 CSS-P 的檔案和解釋。

　● 1．使用 DIV 標籤 （div）

　　當我們使用 CSS-P 的時候， 我們主要把它用在 DIV（division）tag 上。當你把文字，圖象，或其他的放在 DIV 中，它可稱作為“DIV block”，或“DIV element”或“CSS-layer”，或乾脆叫“layer”。而中文我們把它稱作“層次”。所以當你以後看到這些名詞的時候，你就知道它們是指一段在 DIV 中的 HTML。
　　使用 DIV 的方法跟使用其他 tag 的方法一樣：
　　　　<DIV>This is a DIV tag .</DIV>
　　如果單獨使用 DIV 而不加任何 CSS-P, 那麼它在網頁中的效果和使用 <P></P> 是一樣的。
　　但當我們把 CSS-P 用到 DIV 中去以後，我麼就可以嚴格設定它的位置。首先我們需要給這個可以被 CSS-P 控制的 DIV 一個 ID 或說是它的名字。比如說我們給下面這個 DIV 的名字是 truck。給名字的目的是我們以後可用 JavaScript 來控制它， 比如說移動它或改變它的一些性質等等。
　　　　<DIV ID="truck">
　　　　This is a truck
　　　　</DIV>
　　給層次取什麼名字是隨意的，名字可以是任何英文字母和數字，但第一個必須是字母。有兩種把 CSS-P 應用到 DIV 的方法。
　　Inline CSS：Inline 是最常用的方法。
　　　　<DIV ID="truck" STYLE="styles go here">
　　　　This is a truck .
　　　　</DIV>
　　External STYLE tag：使用 External 方法的結果是一樣的。我們會在以後的課程裡再詳細解釋這種方法。現在我們主要討論Inline 方法。請注意在 External 方法裡，在 STYLE 裡的 ID 和 DIV 裡的關係。
　　　　<STYLE TYPE="text/css">
　　　　<!--　#truck {styles go here}　-->
　　　　</STYLE>
　　　　<DIV ID="truck">This is a truck .</DIV>

　　Cross-Browser CSS 性質：
　　我們這個課程的主要目的是讓你寫出的網頁在 NS4 和 IE4 上都能工作， 所以我們主要討論那些對倆者都通用的性質。下面這些性質符合由 W3C 給出的標準。

• position　決定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相對於其他 tag 的，而“absolute”是說 DIV tag 的位置是相對於它所在的視窗。
• left　相對於視窗左邊的位置
• top　相對於視窗上邊的位置
• width　DIV tag 的寬度。所有在 DIV 裡的文字或html都在裡面。
• height　DIV tag 的高度。這個性質很少用除非你想 Clip 層次。
• clip　給出 layer 的 clipping（可看的見的）部分。Clip 可使得 DIV 顯示為一個可以定義的很準確的方塊。你可以用以下的四個值來給出這個方塊的在 DIV 位置和大小。
  clip:rect(top,right,bottom,left);
• visibility　隱蔽或展現DIV 根據它的值“visible”，“hidden”，“inherit”。
• z-index　DIV tag 的立體位置。值越大 DIV 的位置越高。
• background-color　DIV 背景的顏色。
• layer-background-color　Netscape 的 DIV 背景顏色。
• background-image　DIV 的背景圖象。
• layer-background-image　Netscape 的 DIV 的背景圖象。

　● 2．絕對位置和相對定位 （position）

　　絕對位置：
　　定位屬性將是網蟲們開啟幸福之門的鑰匙：
　　H4 { position: absolute; left: 100px; top: 43px }
　　這項CSS規則讓瀏覽器將<H4>的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這裡唯一設定了的是左邊和頂部，也就說，文字將從左至右，從上到下載入瀏覽視窗。
　　左邊和頂部屬性很直觀，左邊（left）設定要素距瀏覽器視窗左邊的距離，頂部（top）設定距離瀏覽器視窗頂部的距離。設定這些距離時，你可以使用所學過的各種度單位或比例值。使用比例值時，比例值的是相對於母體要素的尺寸。
　　你可以定位什麼呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。
　　相對定位：
　　絕對位置使你能精確地定位要素在頁面的獨立位置，而不考慮頁面其它要素的定位設定。相對定位指你所定位的要素的位置相對於在檔案中所分配的位置。例：
　　I { position: relative; left: 40px; top: 10px }
　　相對定位的關鍵在於定位了的要素的位置是相對於它通常應在的位置進行定位。相對定位單元出現在普通的靜態定位單元的行間，定位時沒有把自己和靜態定位單元完全分開。如果你停止使用相對定位，則文字的顯示位置將恢複正常。使用相對定位時要小心，否則容易將頁面弄得非常亂。
　　除了相對定位和絕對位置，你還可以使用static（靜止）參數值。Static 是 position 特性的預設值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設定。也就是說，除了邊距特性，或通過使用 float 特性來浮動單元可影響單元的定位外，其它均不可以。

　● 3．定位單元的控制 （width、height、visiblility）

　　除了控制定位單元的左上方位置，你還可以控制單元的寬度和高度，及單元在頁面的可視性。

　　寬度：定位了的要素在頁面上顯示時仍然會從左至右一直顯示。利用寬度屬性就可以設定字元向右流動的限制，即設定要素的寬度。
　　DIV { position: absolute; left: 200px; top: 40px; width: 150px }
　　瀏覽器接到這項規則時，它將文字按照規則規定的效果顯示，還將段落的最大水平尺寸限制在150象素。
　　寬度屬性只適用於絕對位置的要素。你可以使用我們學過的任何一種長度單位，或使用比例值設定寬度，比例值指相對於母體要素的比例。IE 4中，這項屬性還可用於圖象。你可以通過寬度設定人為地拉寬或壓縮圖象。

　　高度：理論上講，高度應該和寬度的設定類似，只不過是在垂直方向上：
　　DIV { position: absolute; left: 200px; top: 40px; height: 150px }
　　這裡我用了“理論上講”，因為有些瀏覽器不支援高度屬性。

　　可視性：利用CSS，你可以隱藏要素，使其在頁面上看不見。這條屬性對於定位了的和未定位的要素都適用。
　　H4 { visibility: hidden }
　　選項：

• visible 使要素可以被看見
• hidden 使要素被隱藏
• inherit 指它將繼承母體要素的可視性設定。

　　值 inherit 為預設值。這使單元繼承父單元的可見度。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見度取代。例如，段內的 EM 單元被指定為可見，這時如果該段被隱藏，則段內的所有其它內容都將消失，而唯有 EM 單元中的文本是可見的。
　　當一個要素被隱藏後，它仍然要佔據瀏覽器視窗中的原有空間。所以，如果你將文字包圍在一幅被隱藏的圖象周圍，那麼，其顯示效果將是文字包圍著一塊空白地區。
　　這條屬性在編寫語言和使用動態HTML時很有用，比如你可以使某段落或圖象只在滑鼠滑過時才顯示。

　● 4．單元層次 （z-index）

　　特性 z-index 用於堆疊螢幕上的單元。預設情況下，單元堆疊的順序為它們出現在HTML標記的順序——也就是說，後出現單元堆疊在早出現單元的上面。Z-index 特性實際上定義同屬（sibling）單元的堆疊順序以及單元相對父單元的堆疊。按照規範草案，具有正 z-index 值的單元群都堆疊在父單元之上，它們自己的堆疊順序則按其取值的大小來決定（值大的單元在上層）。同樣，具有負 z-index 值的單元群都堆疊在父單元之下，它們自己的堆疊順序也按取值的大小來定（值大的單元在上層，例如值為 -1 的單元在值為 -2 的單元的上面）。
　　該參數值使用純整數。z-index用於絕對位置或相對定位了的要素。你也可以給圖象設定z-index。（對於Communicator，最好將 <IMG>標籤包在<SPAN>或 <DIV>標籤內，然後將z-index應用到<SPAN>或 <DIV>。）

　● 5．剪輯絕對位置單元 （clip）

　　絕對位置單元可以被剪輯——也即剪輯顯示給使用者的地區，只顯示單元的一部分而把其餘部分作透明處理。對於傳統的基於文本和映像的網路頁面，這並不是一個很有用的特徵。但若要求多媒體頁面，這是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支援多媒體頁面，它們通過文檔的指令碼介面動態地調整單元周圍的剪輯區，從而實線文本“劃入”和映像漸顯等顯示特徵。
　　在CSS中，剪輯通過 clip 特性來控制，這一特性只能用於絕對位置單元，其預設值為 auto，按單元的外邊緣來剪輯單元（實際上等於沒有剪輯）。另外，可通過如下運算式設定剪輯框：
　　clip : rect(top,right.bottom,left) ;
　　其中 top、right、bottom 和 left 分別是矩形剪輯框的上邊、右邊、下邊和左邊相對於被剪輯單元左上方的位置。Top、right、bottom 和 left 的值可以為任意絕對或相對長度值（但不能為百分比值），或者是關鍵字 auto。取值為 auto 意味著剪輯地區的各邊放好以後，被剪輯單元中的任何內容都不會超出這個地區。

　● 6．控制單元溢出 （overflow）

　　固定絕對或相對定位單元的 width 和 height，很可能會因為指定的地區不能滿足單元實際內容的需要，而造成單元內容溢出。這時可使用 overflow 來指定瀏覽器如何處理溢出：值 none（預設值）允許瀏覽器顯示溢出的內容，因此單元可溢出指定的地區。而值 clip 要求瀏覽器在單元底部和右邊剪輯單元內容，這樣，超出指定地區的單元內容將不顯示。值 scroll 也同樣要求瀏覽器在單元底部和右邊剪輯單元內容（同 clip），不過，瀏覽器應該（如果可能的話）為單元提供捲軸以使使用者能通過滾動來瀏覽被剪輯的內容。