## Position Declaration Example

`position: fixed` is not supported by Explorer 6 and lower on Windows; nor by Explorer 7 in Quirks Mode. In Strict Mode Explorer 7 supports it fine, though.

The position declaration lets you declare what the position of an element should be.

### Test

Test `position` by changing its value for the test element.

This is the test element. It has the following styles:

    top: 100px;
    left: 100px;
    padding: 1em;
    border: 1px solid #cc0000;

This element is an absolutely positioned child of the test element.

### The four values

`position` takes four values: `static`, `relative`, `absolute`, and `fixed`. `static` is the default value; for any other value you have to apply a CSS declaration.

#### The containing block

In order to specify the exact position of the element, you have to add `top`, `bottom`, `left`, and/or `right` declarations. These all give coordinates relative to the top/left or bottom/right reference point. What is this reference point?

- `position: static`: No reference point, since a static block cannot be moved.
- `position: relative`: The position the block would take if it were not moved (i.e. if it had `position: static`).
- `position: absolute`: The containing block, which is the first ancestor element that does not have `position: static`. If there is no such ancestor, the `<html>` element serves as the containing block. (Note: in older browsers the `<body>` element serves as the default containing block.)
- `position: fixed`: The viewport (browser window).

#### static

An element with `position: static` always has the position the normal flow of the page gives it. It cannot be moved from this position; a static element ignores any `top`, `bottom`, `left`, or `right` declarations.

#### relative

An element with `position: relative` initially has the position the normal flow of the page gives it, but it is subsequently offset by the amount the `top`, `bottom`, `left`, and/or `right` declarations give. Therefore, in combination with such a declaration it appears slightly skewed. The space the element originally took remains empty.

By themselves, relatively positioned elements are uninteresting, since you almost never want to skew an element by a few pixels. However, a relatively positioned element serves as a containing block; and this is the usual reason to use `position: relative`.

#### absolute

An element with `position: absolute` is taken out of the normal flow of the page and positioned at the desired coordinates relative to its containing block.

Since the absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if the element is not there: it closes up the space it would take.

#### fixed

An element with `position: fixed` is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.