在設計檢視中定位項目

發行項
04/10/2013

當您在 HTML 設計工具中建立 HTML 網頁或 ASP.NET Web 網頁時，實際上是會從上到下配置項目。根據預設，在瀏覽器中呈現網頁時，會以相同的由上而下順序呈現項目。有時候是指流程配置。

您也可以使用二維方式配置項目，以水平和垂直座標將項目定位在網頁上的任何位置。這個配置選項會利用所有樣式中都可使用的位置選項。

您可以在設計檢視中拖曳項目以在網頁上進行定位，並可以選取項目並對這些項目套用位置選項。在 [設計] 檢視中，網頁接著會在您定位的位置處顯示項目。您可以利用索引標籤控點拖曳並重新定位項目。在原始碼檢視中，您可以對個別項目在標記中設定位置選項。

呈現網頁時，瀏覽器會使用您指定的位置資訊顯示項目。

流程配置

如果項目不具備任何位置樣式屬性 (Property)，根據網頁或項目之容器項目的 dir 屬性 (Attribute) 設定，或者瀏覽器的語言設定的不同，會在網頁中由上到下以及由左至右或由右至左配置項目。任何的 Web 瀏覽器都可以顯示使用此配置的 HTML 文件。在調整好網頁的大小時，有時候會重新定位項目。

如果在網頁中使用流程配置，則可以在 table 項目內對齊項目，或使用具備位置樣式或文字對齊屬性的 div 項目。不過，無法重疊項目。根據您是否使用絕對單位或百分比做為資料表和儲存格的寬度，調整網頁大小時可能會移動項目。

二維定位

您可以將位置選項套用至個別項目，因此可以將項目放置在網頁上精確的位置。

也可以對您加入至網頁的任何新項目指定位置選項。

Microsoft Visual Web Developer Web 開發工具可讓您指定一些位置選項，這些位置選項會對應至在 W3C 規格中為階層式樣式表所定義的位置選項。位置選項在實作 W3C HTML 4.0 標準的任何瀏覽器中都是有效的，包括支援 XHTML 1.1 的瀏覽器。

選項如下所示：

absolute

項目會呈現在 left, right、top 和 bottom 樣式屬性組合所定義的網頁位置。根據目前項目的父項目定義 0,0 位置。父項目是具有位置資訊的第一個容器項目。例如，如果目前的項目位在具有位置資訊的 div 項目內，則會根據 div 項目的位置計算絕對位置。如果目前的項目沒有具有位置的容器項目，則會根據 body 項目計算位置資訊。

relative

項目會呈現在 left 和 top 樣式屬性所定義的網頁位置。這個選項與 absolute 的不同之處在於，會遵從項目在網頁流程中的位置定義 0,0 位置。使用相對位置且 top 和 left 都設為 0 的項目，在流程中顯示為一般項目。

注意事項
使用絕對或相對位置的項目會遵從在網頁標記中的宣告，錯誤地顯示在網頁中，如此可能會造成混淆。例如，您可以在原始碼檢視中將按鈕定義為標記的第一個項目，但在設定按鈕的位置之後，按鈕在呈現的網頁或設計檢視中可能會當做最後一個項目顯示出來。

static

會使用流程配置呈現項目，這表示項目沒有使用二維定位。如果您要在個別控制項上 (此控制項會覆寫繼承自主題或樣式表的設定) 設定位置選項，則可能會選取這個選項。

Visual Web Developer 也提供了位置選項 Not Set，可讓您移除個別控制項或將來可能加入之控制項的現有位置資訊。

定位靜態文字或項目群組

若要讓您將浮點靜態文字或項目群組建立為一個單位，可以將圖層加入至網頁。圖層是包含位置資訊的 div 項目，可讓您在網頁周圍拖曳項目。接著可以在 div 項目中輸入文字或拖曳項目。 Visual Web Developer 的 [格式] 功能表上包含可加入圖層的命令，您也可以自行建立 div 項目，然後以手動方式加入位置資訊。

將位置限制到格線

如果使用了絕對或相對位置，並且使用像素做為位置的基準 (這表示 left 和 top 屬性的單位是像素)，您就可以設定選項將項目對齊至不可見的格線。這樣可幫助您對齊網頁上的項目。如需詳細資訊，請參閱選項對話方塊、HTML 設計工具、尺規和格線。

分層項目

如果正在使用絕對或相對位置，您可以重疊項目，接著這些項目就會以重疊顯示的方式呈現在瀏覽器中。如果使用資料表定位項目，就不可以重疊物件。

具有絕對或相對位置的項目可以包含 z-index 屬性，這個屬性會以第三維指定項目的由後至前順序。如果有兩個項目共用相同的空間，具有較高圖層索引 (z-index) 屬性值的項目會顯示在前面。如果使用設計檢視中的命令設定位置，會對最後面的項目以 100 開始自動設定 z-index 屬性。如果在原始碼檢視中加入位置屬性，則必須手動加入 z-index 屬性。