层叠样式表/定位

定位方案

您可以使用 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>