层叠样式表/定位

定位方案

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