Document Flow

First, let's describe something simple but important: document flow. Document flow is simply the natural linear progression of how elements appear in the code, from top to bottom. The browser will want to show items in a page as it encounters each of them in a 1-2-3 fashion. Simple, right?

"Position" property values

Next, let's look at our four basic position property options in css:

static

This is default and doesn't need to be specifically set to work. It reads elements in a 1-2-3 fashion and displays them on screen accordingly.

relative

• "Relative" behaves like "static," but has it special, hidden superhero powers.
• You can use special offset properties with it ("left:", "right:", "top:", "bottom:"), as well as the "z-index:" layer stacking order.
• Finally, "relative" can also be a safe home for herding "absolute" children to keep them from straying off the ranch.

absolute

• "Absolute" simply pulls an element out of the normal document flow when invoked. Because of this, it does not heed margins and spacing of other document flow elements.
• It behaves like it has construction adhesive and will unyieldingly stay put in a specific pixel coordinate.
• Absolute elements, however, will scroll off the page when the user scrolls.
• Its placement is determined by: "left:", "right:", "top:", "bottom:", "z-index:", and whether or not it is contained anywhere inside of a "relative" parent.

fixed

• Like absolute positioning, "fixed" pulls an element out of the normal document flow when invoked, but it does NOT scroll with the rest of the page.
• It floats above other elements (and below when assigned) in its assigned place like a hovercraft.
• Its placement is determined by: "left:", "right:", "top:", "bottom:", "z-index:", but it doesn't take orders from "relative" parents like the obedient "absolute" does.

Let's Practice

Below is a link to a simplified practice page you can visit to make real-time live adjustments using your browser's inspector.

In the Inspector Practice Page, that are two main containers: the first is positioned as "relative" while the second is set to the default "static." You will notice that the background images tell you which one is which. Right-click on the boxes to inspect the element and try to change the position of them using "absolute" and "fixed" along with the offsets: "left:", "right:", "top:", "bottom:", "z-index:". See how they behave. Also, feel free to adjust the height and width of the boxes using pixels and/or percentages.

OPEN PRACTICE PAGE