HTML and CSS Reference
In-Depth Information
relative
Changing the
position
value to
relative
means that the element can be positioned
relative to its normal position in the page flow. For example, to display a selected element
20 pixels below its normal position, the following declarations are used:
/* Move element 20 pixels down */
.relative {
position: relative;
top: 20px;
}
Relatively positioned elements are considered part of the normal page flow, so other
elements do not move to fill in the gap left by the element.
The effect of moving an element relative to its normal position can also be achieved
by using the element's margin. This solution is often preferable unless there is a specific
need to make the element positioned, such as whether it will be a container for an
absolutely positioned child element.
/* Move element 20 pixels down */
margin-bottom: -20px;
Keep in mind that changing the margin affects the layout and fills in gaps, whereas
relative positioning does not.
absolute
The
position
value
absolute
detaches the element from any containing elements and
allows it to be positioned relative to its nearest positioned ancestor or to the document
body if there are none.
/* Place element in upper left corner */
.absolute {
position: absolute;
top: 0;
left: 0;
}
fixed
A fixed element is positioned relative to the screen viewport. It does not move when the
page is scrolled. Similar to absolutely positioned elements, fixed elements do not reserve
any space in the normal page flow.
