网站建设里理解起来最简单的定位机制就是相对定位。采用这种机制时，将通过使用偏移属性移动定位元素。不过，这可能有一些有意思的后果。

从表面看来，似乎这就足够了。假设希望将一个图像向上向左移动。图10-58显示了以下样式的结果：

img (position: relative; top:-20px; left:-20px;}

图10-58：相对定位元素

这里所做的只是将图像的上边界向上偏移20像素，左边界向左偏移20像素。不过，注意这里的空白，如果该图像未定位，它本该放在这里。之所以会发生这种情况，原因是当元素相对定位时，它会从其正常位置移走，不过，原来所占的空间并不会因此消失。考虑以下样式的结果，如图10-59所示：

em (position: relative; top; 8em; color:.gray;.}

图10-59：相对定位元素

网页设计人员可以看到，这个段落里有一些空白。本来这是em元素的位置，而em元素的新位置正好在这个空白的后面。

当然，还可以移动一个相对定位元素，让它覆盖其他内容。例如，以下样式和标记的结果如图10-60所示：

img.slide {position: relative; left: 30px;}

<p>

In this paragraph, we will find that there is an image that has been pushed to the right. It will therefore <inig src="star.gif" alt=_A star!* class=_sli<ae-> overlap content nearby, assuming that it is not the last element in its line box.

</p>

图10-60：相对定位元素可以覆盖其他内容

从前几节可以看到，如果相对定位一个元素，它会立即为其所有子元素建立一个新的包含块。这个包含块对应于该元素原本所在的位置。

相对定位有一个有意思的小问题。如果一个相对定位元素过度受限会发生什么情况呢？例如：

strong {position: relative; top: 10px; bottom: 20px;}

这里指定的值要求两种完全不同的行为。如果只考虑top: 10px，则元素应当向下移10像素，但bottom: 20px则要求元素应该向上移20像素。

原来的网站建设CSS2规范没有说明这种情况下会怎么做，不过CSS2.1指出，如果遇到过度受限的相对定位，一个值会重置为另一个值的相反数。因此，bottom总是等于-top。这意味着前面的例子会处理为就好像做了以下声明：

strong {position: relative; top: 10px; bottom:-10px;}

因此，strong元素将向下移10像素。规范还允许不同的书写方向。在相对定位中，right总是等于-left （从左向右读的语言中），而在从右向左读的语言中则恰好相反，left总是等于-right.

小结

浮动和定位是网站建设CSS的两个很吸引人的特性，不过，如果使用时不小心，也会让人很迷惑。对元素定位时，元素重叠，叠放顺序、大小和放置等都需要仔细考虑，另外还必须考虑浮动元素与正常流的关系。因此，使用浮动和定位创建布局需要有所顾忌，不过还是利大于弊。

利用这些特性，很多布局中硗实已经不需要使用表了，不过出于某些原因，Web中还是要使用表，如表示股票行情和运动成绩等，下一章我们将介绍CSS做了哪些改进来处理

　　【注释】

　　[1]　注1：这里确实把“positioning”错拼成了“Positoning”，不过这只是在英语拼法上有问题，这个页面本身还是提供了不错的信息。