position property has a number of values that either tweak or completely override the Document Flow positioning of an element. The values we will explore are:
absolute (which behaves differently on its own versus when paired with a
relative parent element), and
fixed. Each of these values specifies a type of positioning behavior the element will obey.
position property is usually used in conjunction with the
left properties, with which the element can be precisely moved according to the behavior specified by the
By default, elements are positioned on a page according to the order in which they are written in the HTML and whether their behavior is inline or block. The position of each element affects the position of the element(s) that comes after. This default positioning behavior is called Document Flow.
Document Flow describes the default way block and inline items are laid out and affect each other.
position: relative; keeps the element in its initial position within the document flow, but allows use of the
left properties to shift it in various directions from the origin of its original position. The space it originally occupied in the document flow is left intact.
In this example, the
h3 (given a blue background for easy identification) has been set to
relative and has been shifted up and to the right.
Notice that in the above example we used a positive number for the
bottom property to push the element from the bottom. And we used a negative value for the
right property to push the element toward the right. Alternatively, we could achieve the same result using
left with opposite values:
In the example above, try changing the values for
top. Note how the element is repositioned based on your values.
position: absolute; takes the element out of the document flow, causing the rest of the elements on the page to behave as though it was never there. The
left can be used to position the element in relation to the page as a whole. Note that the element moves with the page as it scrolls.
Notice that block elements with
position: absolute; no longer span the entire width of the container, but are only wide enough to fit their contents. However, we can combine values for the
bottom properties or the
left properties to stretch the element to obey both values:
Absolute with a Relative Parent
Normally an element with
position: absolute; is positioned with reference to the page as a whole. However, if a parent, grandparent, etcetera has
position: relative; the absolutely positioned element is positioned with reference to the relative parent.
position: fixed; takes the element out of the document flow, causing the rest of the elements on the page to behave as though it was never there. The
left can be used to position the element in relation to the browser window. Note that the element stays fixed in place as the page scrolls.
In the example above, scroll the preview area and notice how the
h3 stays in place. Can you figure out how to make the
h3 stay at the bottom of the preview area instead of the top?
The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.