3.2 CSS布局定位

CSS排版是一种比较新的排版理念，完全有别于传统的排版方式。它首先从整体上对页面使用Div标记进行分块，其次对各个块进行CSS定位，最后在各个块中添加相应的内容。通过CSS排版的页面，更新十分容易，甚至页面的拓扑结构都可以通过修改CSS属性来重新定位。

提示

拓扑结构是指网络中各个站点相互连接的形式，明确一点讲就是指局域网中文件服务器、工作站和电缆等的连接形式。

3.2.1 浮动定位

浮动定位是CSS排版中非常重要的概念。浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在普通文档流中，所以普通文档流中的块级框表现的就像浮动框不存在一样。float可选参数如表3-1所示。

· left：文本或图像会移至父元素中的左侧。

· right：文本或图像会移至父元素中的右侧。

· none：默认值，文本或图像会显示于它在文档中出现的位置。

下面介绍浮动的几种形式，普通文档流的CSS代码如下，页面效果如图3-4所示。

当令left框向右浮动时，它脱离普通文档流并向右移动，直到它的边缘碰到包含框box的右边框。left框向右浮动的CSS代码如下，页面效果如图3-5所示。

当令left框向左浮动时，它脱离普通文档流并向左移动，直到它的边缘碰到包含框box的左边框。因为它不再处于普通文档流中，所以它不占据空间，实际上覆盖住了main框，使main框从视图中消失。left框向左浮动的CSS代码如下，页面效果如图3-6所示。

如果令三个框均向左浮动，那么left框向左浮动直到碰到包含框box框的左边框，另外两个框向左浮动直到碰到前一个浮动框，三个框均向左浮动的CSS代码如下，页面效果如图3-7所示。

如果包含框太窄，无法容纳水平排列的三个浮动框，那么其他浮动框向下移动，直到有足够空间的地方，其CSS代码如下，页面效果如图3-8所示。

如果浮动框的高度不同，那么当它们向下移动时可能会被其他浮动框卡住，其CSS代码如下，页面效果如图3-9所示。

3.2.2 position定位

position定位与浮动定位一样，也是CSS排版中非常重要的概念。从字面意思上看position就是指定元素的位置，即指定元素相对于其父元素的位置和相对于它自身的位置。position可选参数如表3-2所示。

1．相对定位

对一个元素进行相对定位，可在它所在的位置上，通过设置其垂直或水平位置，让这个元素相对于原位置进行移动。如果将top值设置为40px，那么元素将向下移动40px；如果将left值设置为40px，那么元素将向右移动40px。设置相对定位的CSS代码如下，页面效果如图3-10所示。

提示

在设置相对定位时，无论是否进行移动，元素仍然占据与原来大小相同的空间。因此，移动元素会导致它覆盖其他元素。

2．绝对定位

相对定位被看作普通文档流定位模型的一部分，因为元素的位置是相对于它在普通文档流中的位置的。与之相反，绝对定位使元素的位置与普通文档流无关，因此不占据空间，普通文档流中其他元素的布局就像绝对定位的元素不存在一样。简单来说，设置了绝对定位之后，元素就浮在网页上面了。设置绝对定位的CSS代码如下，页面效果如图3-11所示。

与相对定位的元素一样，绝对定位的元素也可以在它的包含框中向上、向下、向左、向右移动，这提供了很大的灵活性，可以直接将元素定位在页面上的任何位置。

提示

关于定位，主要是要记住每种定位的意义。相对定位是相对于元素在普通文档流中的初始位置进行定位，而绝对定位是相对于最近的、已定位的父元素进行定位，如果不存在已定位的父元素，那就相对于最初的包含框进行定位。

因为绝对定位的元素与普通文档流无关，所以其可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些元素的堆放次序。z-index属性的值越大，元素的堆放位置就越高。

技巧

相对于相对定位的父元素对元素进行绝对定位，在大多数浏览器中实现得很好，但在IE5.X和IE6版本的IE浏览器中有一个问题，如果试图相对于相对定位的父元素设置元素的绝对定位，IE浏览器会相对于文档定位这个元素。解决的方法是，设置相对定位元素的定位方式为相对（position:relative;），并设置相对定位元素的尺寸。

3．悬浮定位

当将元素的position参数设置为fixed时，可定位于相对于浏览器窗口的指定坐标。此可用值的位置通过left、top、right及bottom属性来规定。不论窗口是否滚动，元素都会留在那个位置。IE 6以下版本的IE浏览器不支持该属性值。

4．默认值

fixed可用值为默认值。无特殊定位，元素出现在普通文档流中（忽略top、bottom、left、right或z-index声明）。

5．继承

设置inherit可用值，子元素将会从其父元素那里继承position属性的值。