理解 CSS 坐标

CSS 用于 Web 页面的布局，布局涉及元素的位置，元素位置必须参照坐标系来确定。CSS 坐标系与数学坐标系不同，它的坐标原点在浏览器可视窗口或元素的左上角，x 轴正方向向右，而 y 轴正方向则向下，如下图所示。CSS 坐标单位包括数值、百分比和相对单位。

一个 Web 页面中，不止一个坐标系，而是有多个元素就有多少个体系。以水平选项卡式的导航条为例，下图的效果：

使用了下面一张背景图像：

使用一张背景图像的好处在于浏览器同时下载三个状态的背景，而不用等到需要时（如鼠标悬停时）再下载，从而避免了延迟。

这张背景图由三个 127 像素宽的选项卡组成，在定义 CSS 规则时，正常、悬停和当前状态的相应规则如下：

background:url(images/nav.gif)  no-repeat;

第一条规则表明，背景图像的左上角位置（坐标原点）要和选项卡元素（上例中的 Joumal 所在元素）的左上角位置（坐标原点）重合。如下图所示：

background:url(images/nav.gif) -127px 0  no-repeat;

第二条规则表明，背景图像的左上角位置要和选项卡元素（上例中的 Home 所在元素）左上角位置（坐标原点）左侧（负值表示向左） 127 像素处的点重合。如下图所示：

background:url(images/nav.gif) -254px 0  no-repeat;

第三条规则表明，背景图像的左上角位置要和选项卡元素（上例中的 Maps 所在元素）左上角左侧 254 像素处的点重合。如下图所示：

通过下面这幅图可以进一步加深对两个元素（选项卡和背景图像）坐标系相对位置关系的理解：