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 像素處的點重合。如下圖所示：
通過下面這幅圖可以進一步加深對兩個元素（選項卡和背景圖像）座標系相對位置關係的理解：
