Watkins Web 3: Blog

James Muspratt
Feb 4

Cheat Sheet: CSS Positioning

The position property is powerful but can be problematic when used incorrectly. If you’re just trying to create columns for your content or put an image over to one side, you should use CSS floats, not positioning.

But for certain situations, position:absolute, position:relative, and position:fixed are necessary. Here’s a rundown.

position:absolute

Keep in mind that the default state of HTML elements in “normal flow” is position:static;. “Static” is a bit of a deceptive word: it just means that the element naturally takes up space on the page and pushes other elements down (or to the side, if floated) by as much space as it occupies.

When you target an element in CSS and apply position:absolute, a few things happen:

  1. The positioned element is removed from “normal flow”
  2. The positioned element can be moved with the top / bottom and left / right properties, in addition to margins and padding
  3. The other elements on the page no longer “know” the dimensions or location of the positioned element. In fact, they flow down the page as if the element weren’t there at all.

Naturally, this makes position: absolute; useful for making some content overlap other content.

position: relative

Position:relative positions an element “relative” to where it would have been positioned statically. In other words, rather than add a margin-left:20px;, you could use position:relative; left: 20px;.

This is a contrived example, though, and we tend to use position:relative for a totally different purpose: By default, position:absolute’s coordinates are determined by the closest positioned container. This is usually the browser window itself (<body>). Since we often want to use a different container’s coordinates for absolute positioning, we can apply position:relative to the container of our choosing. Without a top or left value, this doesn’t do anything to the container itself. Instead, it allows us to apply position:absolute; to some nested element or elements and have our coordinates be relative to the container.

For example, some HTML:

<div id="main-column">
	<ul id="nav">
		[navigation links]
	</ul>
 </div>

And the CSS:

#main-column {
	width:500px;       /* set a width */
	margin:0 auto;     /* and center it on the page */
	position:relative; /* reset positioning coordinates for elements inside #main-column */
    } 
#nav {
	position:absolute; /* remove from document flow */
	right:20px;        /* this means 20px from the right edge of #main-column */
	top:20px;          /* this means 20px from the top edge of #main-column */
   }

position:fixed

Like position:absolute;, position:fixed; pulls the content out of normal document flow. In addition, it locks its position (defined by top / bottom and left / right) relative to the browser frame, so the element stays on screen even as the user scrolls.

If you need to apply position:fixed relative to a container, apply position:absolute; to the container first.