Position Property

This lesson will introduce concepts important to building a css webpage layout using the "position" property. You will learn how the position property interacts with a document's linearitazion (document flow) and how to manipulate each poition option to move things around on the page.

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
stacked blocks reading ABC and 123

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
batman illustration
  • "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
silhouette of military officer saluting
  • "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
flying saucer hovering
  • 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