The Position Property
The position property in CSS allows for advanced positioning of elements on a page. It is not a catch-all, and should be used only when the default Document Flow (see below) is insufficient to achieve the desired result.
Position Basics
The 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: relative, 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.
The position property is usually used in conjunction with the top, bottom, right, and left properties, with which the element can be precisely moved according to the behavior specified by the position value.
Document Flow
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.
Relative
position: relative; keeps the element in its initial position within the document flow, but allows use of the top, bottom, right, and 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 top and left with opposite values:
In the example above, try changing the values for left and top. Note how the element is repositioned based on your values.
Absolute
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 top, bottom, right, and 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 top and bottom properties or the right and 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.
Fixed
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 top, bottom, right, and 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?
Video Lesson
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.