CSS2 Test Suite: 9.3.1 position

The style declarations contained within this page:

.cl1 {position: static; top: -5px; left: 2px;}
.cl2 {position: relative; top: -5px; left: 2px;}
.cl3 {position: absolute; top: 25px; left: 2px;}
.cl4 {position: fixed; top: 0px;  left: 200px;}
.contain {position: relative; background: yellow; height: 50px;}

The following paragraph will contain four positioned images. Each image is prefaced by a class marker, and each image is numbered so that it is possible to determine which images have been positioned in which places. The containing 'p' element has a class of 'contain'. The following is what should happen with each image:

• The image should not be offset, as static-position elements ignore the offset properties. It should scroll with the document.
• The image should be offset 5 pixels upward, and 2 pixels to the right. It should scroll with the document.
• The image should be placed 25 pixels below the top edge of the containing block, and 2 pixels to the right of the left edge of the containing block. It should scroll with the document.
• The image should be placed at the top edge of the viewport, and 200 pixels to the right of the left edge of the viewport. It should not scroll with the document.

[cl1] [cl2] [cl3] [cl4]

An excerpt from section 9.3.1:

The 'position' and 'float' properties determine which of the CSS2 positioning algorithms is used to calculate the position of a box.

The values of this property have the following meanings:

static

The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply.

relative

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.

absolute

The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

fixed

The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example).