上一节介绍了网页设计三种定位机制使用了4个属性来描述定位元素各边相对于其包含块的偏移。我们将这4个属性称为偏移属性，这对于完成定位是很重要的一部分。

top、right、bottom、left

值：<length>| <percentage> | auto | inherit

初始值：auto

应用于：定位元素（也就是position值不是static的元素）

继承性：无

百分数：对于top和bottom，相对于包含块的高度；对于right和left，相对于包含块的宽度

计算值：对于相对定位元素，见以下说明，对于static元素为auto，对于长度值，是相应的绝对长度；对于百分数值，则为指定的值；否则，为 auto

说明：计算值取决于一系列因素，见附录A中的相关例子

这些属性描述了距离包含块最近边的偏移（所以得名offset）。例如，top描述了网站建设定位元素上外边距边界离其包含块的顶端多远。如果top为正值，会把定位元素的上外边距边界下移，若为负值，则会把定位元素的上外边距移到其包含块的顶端之上。类似地，left描述了定位元素的左外边距边界在其包含块左边界右边（正值）或左边（负值）有多远。如果是正值，会把定位元素的外边距边界移到包含块左边界右边，而负值则将其移到包含块左边界左边。

还可以这样来讲，正值会导致向内偏移，使边界朝着包含块的中心移动，而负值会导致向外偏移。

注意：最初的网站建设CSS2规范实际上指出，偏移的是内容边界，而不是外边距边界，不过这与CSS2的其他部分不一致。这个错误在后来的勘误和CSS2.1中得到修正。所有当前开发的浏览器（写作本书时）都使用外边距边界来完成偏移计算。

偏移定位元素的外边距边界时，带来的影响是元素的所有一切（包括外边距，边框、内边距和内容）都会在定位的过程中移动。因此，可以为定位元素设置外边距、边框和内边距，这些会随着定位元素一直保留，并包含在偏移属性定义的区域内。

网页设计人员要记住重要的一点，偏移属性定义了距离包含块相应边的偏移（例如，left定义了距离包含块左边的偏移），而不是距包含块左上角的偏移。正是因为这个原因，填充一个包含块的右下角时要使用以下值：

top: 50%; bottom: 0; left: 50%; right: 0;

在这个例子中，定位元素的左外边界放在包含块中间的位置上，这是距包含块左边界的偏移。不过，定位元素的右外边界没有从包含块的右边界偏移，所以二者不矛盾。定位元素的顶端和底端也是如此：外上边界放在包含块中间的位置上，但是外下边界没有从包含块底端上移。这就得到了如图10-26所示的结果。

图10-26：填充包含块的右下1/4部分

注意：在图10-26以及本章大多数例子中，都是基于绝对定位的，由于绝对定位对于展示top、right、bottom和left如何工作是最简单的机制，所以我们一直都会用绝对定位。

需要说明，网页设计定位元素的背景色稍有不同。图10-26中没有外边距，但是如果确实有外边距，在边框和偏移边界之间就会出现空白。看上去就好像定位元素没有完全填充包含块右下方1/4部分一样。实际上，它确实填满了这个区域，不过人眼不能直接看出。因此，以下两组样式会得到几乎相同的外观效果，假设包含块为100em高，100em宽：

top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em;

top: 60%; bottom: 10%; left: 60%; right: 10%; margin: 0;

重申一句，二者只是在视觉效果上相似。

通过使用负值，可以将一个元素定位到其包含块之外，例如，指定以下值会得到如图10-27所示的结果：

top:-5em; bottom: 50%; left: 75%; right:-3em;

图10-27：将一个元素定位到其包含块之外

除了长度值和百分数值，网页设计的偏移属性还可以设置为auto，这是默认值。对于auto没有定义行为，它会根据所用的定位类型改变。本章后面将逐个考虑各种定位类型，并介绍auto如何作用。