層疊樣式表/定位

定位方案

您可以使用 CSS 定位來佈局頁面，而不是使用表格。使用 CSS 定位，您可以使頁面更加動態。定位並非與所有瀏覽器相容，因此在編碼時，有必要了解您的受眾。

定位型別

正常流/靜態定位
相對定位
絕對定位
固定定位

以下示例均使用基本相同的 XHTML 文件。只有 CSS 定位發生了變化。為了方便您檢視 CSS 的變化，兩個塊周圍都有彩色邊框。外部塊有一個藍色邊框 (#0000FF，簡寫為 #00F)。內部塊有一個紅色邊框 (#FF0000，簡寫為 #F00)。在這些示例中，只有內部塊的規則發生變化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Standard XHTML</title>
    <style type="text/css">
      #main {
        border: 1px solid #00F;
      }

      #content { /* This rule changes in the example below. */
        border: 1px solid #F00;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <p>Lorem ipsum pro ne apeirian cotidieque, eu per nihil everti ornatus.
        At nam iudico dolore suavitate. Harum quaeque consetetur ei usu, ius et
        impetus aliquid consequat, at pro nullam oporteat partiendo. Sed ea nonummy
        suscipiantur. Nec libris erroribus scriptorem ut.</p>
      <div id="content">
        <p>His ne albucius liberavisse definitionem. His eu kasd eligendi
          invidunt, et prima legimus adolescens mea. Nonumy aliquid pri et, qui
          ex dicant nostrum moderatius. Eam in malorum efficiantur, falli eleifend
          cotidieque qui ne. At modus vituperata dissentiet has. Mel postea aeterno
          diceret eu, eu postea laoreet sea, nam te meliore platonem necessitatibus.</p>
      </div>
      <p>Vix in causac adipisci, dicit facete vulputate te mel. Et vis noster
        admodum mediocritatem, quaeque mnesarchum sea id. Quas vocibus id qui. Ne
        delenti iracundia conitituam sed, erudin invenire consulanu usu in. Vero
        legimus duo ex, his no suscipit vituperata delicatissimi.</p>
    </div>
  </body>
</html>

正常流

正常流是 Web 瀏覽器的預設行為。您不需要在樣式表中指定它，因為它就是預設行為。在正常流中，框會按照您在程式碼中放置它們的順序顯示，每個框級元素都堆疊在下一個元素之上。

    <style type="text/css">
      #main {
        border: 1px solid #00F;
      }

      #content {
        border: 1px solid #F00;
      }
    </style>

靜態定位

靜態定位是透過宣告 position: static 來應用的。這將元素放置在正常流中。由於正常流是預設行為，因此通常不需要顯式使用它。

它在覆蓋另一個較低特異性的規則時很有用，例如：

 div    { position:absolute; }
 #notMe { position:static; }

會將所有 div 元素設定為絕對定位，除了 id 屬性值為 notMe 的元素。

left、top、right 和 bottom 屬性不需要，因為它們不會影響靜態定位。它們在下面用於顯示它們沒有任何影響。

    <style type="text/css">
      #main {
        border: 1px solid #00F;
      }

      #content {
        border: 1px solid #F00;
        position: static;
        left: 100px;
        top: 125px;
        right: 50px;
        bottom: 30px;
      }
    </style>

相對定位

瀏覽器首先像在正常流中一樣佈局元素。然後，元素會根據 left 或 right 屬性以及 top 或 bottom 屬性指定的量進行偏移。在元素應該出現的位置，正常流中會留下一個間隙。相對定位不允許元素改變大小。如果同時指定了 left 和 right，則在像英語這樣的從左到右的語言中，right 將被忽略。如果指定了 top，則 bottom 將被忽略。

    <style type="text/css">
      #main {
        border: 1px solid #00F;
      }

      #content {
        border: 1px solid #F00;
        position: relative;
        left: 100px;
        top: 125px;
        right: 50px;
        bottom: 30px;
      }
    </style>

絕對定位

這將一個框相對於其包含塊進行定位。但是，與相對定位不同的是，移除元素後，正常流中留下的間隙會關閉。包含塊是最近的祖先元素，其 'position' 為 'absolute'、'relative' 或 'fixed'。

您可以使用任何一個或多個 left、top、right 和 bottom 屬性來定位框。絕對定位的座標系在包含塊的左上角為 (0,0)。增加 top 的值會將元素向下移動頁面。

由於絕對定位的框從正常流中移出，因此它們可以位於頁面上的任何位置，而與它們在文件原始碼中的位置無關。

    <style type="text/css">
      #main {
        border: 1px solid #00F;
      }

      #content {
        border: 1px solid #F00;
        position: absolute;
        left: 100px;
        top: 125px;
        right: 50px;
        bottom: 30px;
      }
    </style>

固定定位

固定定位是絕對定位的一個子類別。唯一的區別是，對於固定定位的框，包含塊是由瀏覽器視窗大小確定的。當網頁滾動時，固定元素不會像其他元素那樣移動。它與絕對定位一樣，相對於包含塊進行計算，將定位框從正常流中移出。

    <style type="text/css">
      #main {
        border: 1px solid #00F;
      }

      #content {
        border: 1px solid #F00;
        position: fixed;
        left: 100px;
        top: 125px;
        right: 50px;
        bottom: 30px;
      }
    </style>

浮動元素

元素可以設定為在正常流中浮動。框會盡可能地向左或向右移動。浮動框之後的元素會向上移動，填補浮動框留下的任何間隙，從而圍繞浮動框流動。

請注意，浮動不是一個定位屬性，但它起著定位屬性的作用。浮動是使用 float 屬性來應用的，而不是 position 屬性。在示例中，浮動定位在左側，但您也可以輕鬆地將其定位在右側。向內容塊添加了一個寬度，以便您可以看到浮動塊之後的元素如何向上移動並圍繞內容塊未佔用的區域進行環繞。

在浮動塊級元素時，必須設定 width 屬性，否則它們會擴充套件以填充滿其容器的整個寬度。

    <style type="text/css">
      #main {
        border: 1px solid #00F;
      }

      #content {
        border: 1px solid #F00;
        left: 100px;
        top: 125px;
        right: 50px;
        bottom: 30px;
        float: left;
        width: 425px;
      }
    </style>