10.2  定位

通过利用一些简单的CSS规则，定位（position）使得设计者可以将(X)HTML元素精确放置。position属性确定了每个元素框（box）定位的参考点。所有的框一开始都按文档中正常的元素流定位。而position属性允许我们改变这些自然的位置。在深入研究本节之前，请务必保持头脑清醒并清空你的大脑，因为CSS定位是比较难以掌握的一项技术。和传统的页面布局不一样，在CSS 2面世之前，构建网站基本上没有什么必须要遵循的原则。因此，在实现定位、分层、以及设定条目在页面的确切位置等问题时，设计人员往往没有什么限制。

幸好，这些基于定位实施布局的规则主要是（一定程度上）为了突破基于表格设计的一些限制。同时，这些规则还突破了把因特网作为一个基本信息工具的基础思想。有了定位，设计人员就真正具有创新能力了。遗憾的是，定位是一个很难快速理解的概念。

本节主要介绍一些定位的基本知识。所采用的例子也是专门为了介绍CSS定位所设计的。因此在现阶段，效果并不是很好。

下一章，将利用这些基本原则，并通过对其进行扩展以创建一些非常灵活的布局和特有的页面元素。作为布局的关键工具，这些原则需要早早地就留在你的脑海里。因此不要忘记在这里所学到的知识，因为第11章将使用这些知识。

在详细介绍各种定位方法之前，我们先尽量简单地快速介绍一下定位的4种方法。

q 静止定位（static positioning）：这种方法最容易理解，也和本书前面介绍的方法最为接近。这个术语基本上描述了默认情况下元素如何放置。浏览器读取(X)HTML文件，并将该文件解释成各个独立的元素，并按照给定的方式在元素上应用CSS，最后将所有这些元素集中到一个可视化的网页上。这种方法使得所有元素的最终位置都是一个静止位置。正因为如此，关于这种方法没有什么特别需要说明的。

q 绝对定位（absolute positioning）：相对前一种方法，这种方法要好一些。绝对定位允许用户指定元素的左上角、右下角或者其他的参考点和最近的父元素之间的关系而将该元素从正常的文档流中拖出来。当页面滚动时，这些元素将保持它们各自的位置不变，随着页面一起滚动，就像粘在一起一样。

q 固定定位（fixed positioning）：该方法又改进了一步。固定定位允许元素相对于实际的浏览器窗口放置。因此，页面滚动时，所有元素将一起滚动，但是固定的元素例外。这些元素将保持它们与浏览窗口上边框、左边框、右边框或者下边框之间的基本像素值。

q 相对定位（relative positioning）：相对定位元素是相对于它的正常情况下静止定位的位置而言的。也就是说，这个相对是相对默认情况下的位置而言。比如说，该方法如果应用到一个标题，应该定义它相对于在默认情况下浏览器把它放置的位置。

10.2.1  基本定位属性和值

一旦开始深入研究这个问题，你会发现很多属性可以用来实现元素定位。但是现在，我们仅仅关心下列属性：

其他一些与定位相关的属性将在本书的后续部分涉及，尤其是在你学习布局的时候。现在，主要看一下position和相关的一些属性是如何影响基本元素的。

1. position

该属性有4个可能值，分别对应4种不同的定位方法：static、absolute、fixed和relative。希望使用哪种定位方式，就将该属性设置为对应的值。static是默认值。在任何情况下，浏览器默认都是以静止定位方式来定位元素。在我们介绍不同的定位方法时，position属性的相应值也将做一定的介绍。

2. top、left、bottom和right

一旦需要定义元素定位，那么需要设定top、left、bottom和（或）right属性的值来偏移元素。所有这些值都可以通过长度、百分比以及auto来设定。

按照规定，偏移完全依赖于position属性的值，其结果如表10-1所示。

表10-1  基于position值产生的偏移

3. 示例

通过将CSS应用到(X)HTML实例，就可以很容易看到各个position值在定义相同的top和left值时是如何工作的。

注意，在我们的定位例子中，使用了下面的(X)HTML，其目的是为了控制图像元素（<img>）的位置。

为了看到所有position值的效果，容器div设定了特定的宽度和高度，因此浏览器窗口产生滚动条。

这样就为使用定位做了一切准备。

(1)       static

不设定position的值或者声明position:static时，段落和图像将按照它们的默认（静止定位）位置排列在容器中，如图10-16所示。

图10-16  元素在它们的静止位置

(1) relative

很好，现在我们将position的值改为relative，以达到一个基于静止位置的结果。

现在，图像出现在它原来位置之上60px（由负的top值所致），并且距离静止位置的左边400px（默认出现的），如图10-17所示。

图10-17  通过设定position:relative，图像出现在距离它原来位置右端400px处

在这种方法中，位置和所有的父元素以及浏览器窗口都没有任何关系，但是和元素自身的属性相关。注意在标题和段落之间的间隙，默认情况下，图像应该位于此。

(1) absolute

现在我们再次移动图像。但是，这次首先设定position为absolute，然后再用right和top来设定它的坐标。

通过声明left为400px，结合position:absolute，图像被移动到相对于视窗的相应位置，如图10-18所示。

图10-18  现在使用position:absolute使得图像距离它的静止位置400px

注意，段落也发生了变化。在图像本来应该出现的地方已经没有间隙。同样，尽管图像是相对于浏览器进行定位的，但是它不是固定的。因此，如果滚动，这些元素将像粘在相应的位置上一样，一起移动。

现在好多了，绝对定位元素以它最近的定位父元素作为参考点。因此，我们可以看一下如果父元素（container）采用relative定位，图像会处在什么位置。

在此，由于conatiner使用了position:relative和top:100px，它将距离它的正常位置100px。因此，由于在container中的图像采用绝对定位，那么它不会以视窗作为起点，而是以它在container中的原来位置作为起点。如图10-19所示，所有元素都相对于前面一个图中出现的位置往下移动了100像素。

图10-19  position:relative和top:100px使得container相对于其原来的位置向下移动了100像素；而由于图像采用绝对定位，所以图像的参考点是最近的定位的父元素——container，这样图像也往下移了100像素

(1) fixed

这种方法也不错。在这种方法中position设定为fixed，坐标仍然保持不变。注意，容器已经重新回到了它的默认（静止定位）位置。

这个改变使得图像将出现和在绝对定位例子中相同的位置。当你滚动页面时，你才知道奥妙所在（如图10-20所示）。

图10-20  图像的最初位置（上图），注意，尽管页面滚动，图像的位置不变，它的位置和浏览窗口固定

通过使用神奇的position:fixed，图像在浏览窗口上保持不变，固定在距离浏览器左边400px处。这种技术在很多地方可以用。当有些导航元素或者表单不管页面怎么滚动都需要在窗口上显示时，这种方法就显得很完美。但是，由于在一些老版本的浏览器中不被支持，如Netscape 4.7及以前的版本，所以该技术要谨慎使用。Netscape 4.7及以前的版本（或者更老的浏览器）使用一种比较呆板的定位模型，这样将使得一些逻辑上非常完美的、合法的定位在这些浏览器上不能正常工作。因此，也就导致使用这些浏览器的用户认为你完全合法的布局看上去很差，并且在很大程度上是由你的失误造成的。这些用户希望你在处理这些问题时，应该有一些技术来针对这些浏览器屏蔽你所设计的复杂CSS。

10.2.2  记住这一点

正如我在前面提到的一样，这些例子仅仅是CSS定位能力的冰山一角。还有很多其他属性可以用来创建非常好的页面布局，同时还可以让那些拥有基本浏览器的用户也对你的设计非常满意。