Positioning Rules

Demo starter files

CSS has a few different rules for special positioning of elements. With the exception of floating elements, most of what we've done so far has only used the default setting - static.

This is a good thing. Elements nest and styles cascade for a reason. Breaking that structure should be done with care.

You can design an entire page by positioning every element using precise x and y pixel coordinates, putting everything exactly where you want it. You'll also end up with an extremely rigid design that doesn't scale at all. This is one of the reasons that it's almost impossible to make an effective drag and drop web site editor.

Disclaimer aside, here are the different types of positioning which all have their place, and can be fun to play with when a project calls for them!

The CSS property here is position, and the options are static, relative, absolute, fixed, and sticky.

Static

Static is the normal CSS document flow. The browser calculates how much space elements need based on their contents, and all of their positions are determined relative to one another.

Relative

With relative positioning, the browser still creates the space an element would normally occupy, but the element is shifted relative to that position using an x and y offset.

Relatively positioned elements are rendered in front of static content.

element {
  position: relative;
  top: -20px;
  left: 20px;
}

Absolute

The element is removed completely from the document flow, so no space is created for it. Coordinates for x and y can then be explicitly set.

The context of the x and y positions are determined by one of two factors:

The nearest ancestor element with a position setting other than static.
If all of the element's ancestors have static positioning, the x and y position is based on the root element (<html> or <body>). This effectively means the viewport, or browser window.

Absolutely positioned elements are rendered in front of static content.

element {
  position: absolute;
  top: 25px;
  right: 25px;
}

Fixed

A fixed element is removed from document flow, so just like absolute, no space is created for it in the flow of other elements. A fixed element "sticks" to its position regardless of document scroll. The x and y position is almost always calculated relative to the viewport.

Fixed positioned elements are rendered in front of static content.

element {
  position: fixed;
  left: 0;
  bottom: 0;
}

Sticky

Sticky is the newest positioning rule (the others have been around for many years). When an element is set to position: sticky, it behaves as relative positioning until it is scrolled to a set position in the viewport, then it behaves as fixed.

Sticky positioning has pretty good support. Check caniuse (link in resources below) for the latest updates on support and bugs. For example, Safari currently has a bug where position: sticky will not work if the parent element has overflow: auto. So if you're using this in, say, a container which also has floated elements, you might need to try overflow: hidden or pick a different clearing method!

element {
  position: sticky;
  top: 0;
}

These settings take a lot of practice and experimentation. Download the starter files if you haven't already, and let's try them out!