Understanding Axes and Coordinates in CSS3

One syntax concept that’s new to CSS3 is that of the axis (or axes when you
have more than one). You may know all about axes if you remember your
math lessons, but if you’re reading this section, I’ll assume you need a refresher.
CSS uses the Cartesian coordinate system, which consists of two lines, one
horizontal and one vertical, that cross each other at a right angle. Each of
these lines is an axis: The horizontal line is known as the x-axis, and the vertical
line is known as the y-axis. The point where the two lines meet is called the
origin.

For onscreen items, you measure the lengths of these axes in pixels. In
Figure 6-1, you can see the axes and origin are overlaid on a grid. Imagine
that each square corresponds to a single pixel. You’ll also notice positive (+)
and negative (–) labels at either end of each axis; these tell you that the dis-
tance away from the origin will be measured either positively or negatively in
this direction.
Now that you understand this concept, you can find the coordinates of
any point relative to the origin. The coordinates are a pair of values—one for
each axis—which indicate the distance from the origin. The origin has coor-
dinates (0, 0). For example, given the coordinates (4, 5) you would find the
point by moving 4 pixels along the x-axis, and 5 pixels along the y-axis. Likewise,

the coordinates (–3, –1) indicate a point 3 pixels in a negative direction
away from the origin along the x-axis and 1 pixel away from the origin in a
negative direction along the y-axis.


If this all sounds terribly complicated, don’t worry—you’ve been using the
Cartesian coordinate system already with properties like background-position;
you just didn’t realize it yet.
In CSS, all elements have a height and a width, each of which is a stated
number of pixels in length (even when using other length units such as em or
a percentage). The height and width together creates a pixel grid; for example,
an element that is 10px by 10px in size has a pixel grid of 100px. If you con-
sider that the origin of the element is at the top-left corner, then the two
positional values for properties like background-position correspond exactly to
the x and y coordinates.