層疊樣式表/定位

定位方案

您可以使用 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 屬性，但它像一個 position 屬性一樣工作。float 是用 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>