Chapter 17: CSS Positioning
Inherited: No
Position
The position property (as you may have guessed) changes how elements
are positioned on your webpage.
position: value;
Values:
static
relative
absolute
fixed
Now, what does all that mean?
Static
Static positioning is by default the way an element will appear in the
normal flow of your (X)HTML file. It is not necessary to declare a
position of static. Doing so, is no different than not declaring it at all.
position: static;
Relative
Positioning an element relatively places the element in the normal flow of
your (X)HTML file and then offsets it by some amount using the
properties left, right, top and bottom. This may cause the element to
overlap other elements that are on the page, which of course may be
the effect that is required.
position: relative;
Absolute
Positioning an element absolutely, removes the element from the normal
flow of your (X)HTML file, and positions it to the top left of it's nearest
parent element that has a position declared other than static. If no
parent element with a position other than static exists then it will be
positioned from the top left of the browser window.
position: absolute;
Fixed
Positioning an element with the fixed value, is the same as absolute
except the parent element is always the browser window. It makes no
difference if the fixed element is nested inside other positioned elements.
Furthermore, an element that is positioned with a fixed value, will not
scroll with the document. It will remain in it's position regardless of the
scroll position of the page.
Internet Explorer does not support the fixed value
for the positioning of an element. Thus it will not position fixed elements
correctly and will still scroll with the page. To see this effect in action you
will need to use a standards compliant browser, such as Firefox
position: fixed;
When positioning elements with relative, absolute or fixed values the
following properties are used to offset the element:
top
left
right
bottom
position: absolute; top: 10px; right: 10px;
