ptg16476052288 LESSON 11: Using CSS to Position Elements on the Page
Positioning Schemes
To control the position of an element on the page, you first have to choose a positioning
scheme. There are four positioning schemes: static, relative, absolute, and fixed.
You specify which scheme to use for an element using the position CSS property.
You can put these schemes into two categories. The static and relative schemes do
not alter the layout of the document, while no space is reserved in the page layout for ele-
ments positioned using the absolute and fixed schemes.
The static scheme is the default. Elements that are not floated flow down the page
from left to right and top to bottom. This is referred to as the normal flow. The relative
scheme positions the element relative to its position in the normal flow. The element’s
original positioned is preserved and affects the position of the subsequent elements. The
absolute and fixed schemes enable you to position elements in any location you like,
and elements positioned using those schemes are removed from the document layout
entirely.
If you specify a position for an element other than static, you can set a position for
the element. There are four positioning properties : top, left, bottom, and right. The
position setting is what establishes what the values of these properties relate to. Here’s
an example:
.thing {
position: relative;
left: 50px;
top: 50px;
}In this case, elements in the thing class will be shifted 50 pixels down and 50 pixels to
the left from the element’s position in the normal flow. If I were to change position
to absolute or fixed, the element would appear 50 pixels from the nearest positioned
ancestor of the element, or if no such ancestor exists, the browser window itself.
Generally, when you’re positioning elements, you specify a left or a right value and
a top or a bottom value. If you specify conflicting values, one of the values you specify
will be ignored. It’s much safer to use the sizing properties to size your elements and then
specify the position of one corner of your element if you want to indicate where it should
be positioned.Relative Positioning
Let’s look at a page that uses relative positioning. This page illustrates both how relative
positioning works and some of the problems with it. A screenshot of the page listed in the
following code appears in Figure 11.1.