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 像素处的点重合。如下图所示：
通过下面这幅图可以进一步加深对两个元素（选项卡和背景图像）坐标系相对位置关系的理解：
为之漫笔（李松峰），本博客专注于Web前后端技术、移动平台开发技术、交互设计和技术翻译。声明一下，因为时常需要外出审稿，而且基本不带笔记本，所以有时可能会迟一点回复大家的留言。
I’m really happy I found it thank you very much
Who has deceiv＇d thee so oft as thy self?
This really answered my problem, thank you!
Thanks for your sharing!
I just required some information and was searching on Google for it. I visited each page that came on first page
and didn’t got any relevant result then I thought to check out the second one and got your blog. This is what I
wanted!
http://www.discounthatsshop.com/
nice post , i like it , thanks for sharing it . have a nice day.
thanks for sharing it and please keep doing this good job .