How To, Working with Positioning elements in CSS

One of the most misunderstood and seemingly complex parts of CSS is the position attribute. Position can feel out of control and difficult to manage, if you’re not clear on how and why it works the way it does. I’m here to tell you that not unlike that monster in your closet, positioning is nothing to fear.

Some things to keep in mind

Everything is a box. Even if it doesn’t look like a box or seemingly behave like one, it is. Boxes by nature stack, sometimes they stack within one another, other times on top of each other.

Everything has a parent. As is true with being human, one cannot exist without parents, the same is true in HTML and CSS development.

Now that you know those two key pieces of the puzzle—which help you not only with today’s lesson, but in general as well—we can move onto the types of positioning and their differences.

The Four Horsemen of positioning

There are four types of positioning. static, fixed, relative and absolute.

static is the default type of positioning, it applies to all elements without needing to be declared, in fact if you ever find yourself needing to declare this as a positioning type, you may be writing too specific or complex code.

relative positioning tells the browser to start the element relative to it’s original (static) location in the document.

absolute positioning places itself on top of the rest of the document and when you set it’s top, left, bottom or right attributes it positions itself relative to the nearest positioned parent. If a positioned parent doesn’t exist it defaults to the <body> of the document.

fixed A fixed element will not scroll with the rest of the document, it’s position is independent of the browser viewport. Otherwise it behaves similarly in terms of top, left, bottom, right and z-index as an absolute positioned box does.

A Few of the horsemen’s tools

Position attributes are powerful on their own, but they do work well with a few other attributes that when combined give us a great deal more flexibility.

Top, left, bottom, right. These four attributes allow us to explicitly declare where we want our positioned boxes to render in relation to the document and their positioned parents.

z-index tells our positioned box where to be in terms on depth on the page. Yeah our HTML page has 3 dimensions, uh sort of. Only a box that has positioning of relative, absolute or fixed can be given a z-index. This allows us to layer positioned boxes on top of each other, overlapping one another if you will.

Some Quick Examples

Let’s take a closer look at the three alternate positioning values.

Relative

Here is a common case where relative positioning can be quite useful. We have a sidebar, that contains some headings that we want to have “break out” of the left hand side of the sidebar visually. A common way that developers do this is with negative margin declaration, unfortunately negative margins don’t work in MSIE as expected.

The code looks like this;

#sidebar h2{
 left: -50px;
  position: relative;
 z-index: 1;
}
CSS

This is saying to the browser, “Hey browser, whenever you see a <h2> inside a box identified #sidebar, go ahead and shift it to the left 50 pixels, oh yeah and please put it on top of the #sidebar, thanks!”

Absolute

Here is a cool way to use absolute positioning. Let’s say in that same <h2> above we want to place a neat little icon on the right side of that <h2>, but not just to the right of the text, but aligned with the right hand side of the actual <h2> box.

Here is the HTML

<h2>Heading <span class="cool-icon">Icon here</span></h2>
HTML

The CSS, perhaps?

#sidebar h2 .cool-icon{
  background: transparent url(img/cool-icon.gif) no-repeat 0 0;
 display: block;
 height: 16px;
 position: absolute;
 right: 0;
 top: 0;
 width: 16px;
}
CSS

The reason this works as expected is because earlier we gave the <h2> a position of relative, which makes it a positioned parent. Otherwise the .cool-icon would be in the top right hand of the browser viewport.

Fixed

So what about fixed positioning? What is something cool we can do easily with that? How about a #sidebar that stays in place as the rest of the document scrolls? I’ll show you how to do that, but there is something to keep in mind, if #sidebar ever gets taller than the browser viewport, anything below the bottom of the viewport will be inaccessible to your users, as the element is FIXED and will not scroll regardless of it’s content. You can prevent this by setting a common height on the #sidebar

So how to do it?

#sidebar{
 height: 550px;
  position: fixed;
  z-index: 1;
}
CSS

That’s that, sincerely that little guy won’t budge.

Recap, and Reminders

  1. Everything is a box.
  2. Everything has a parent.
  3. Everything starts out statically positioned.
  4. Absolutely positioned elements require a positioned parent.
  5. Relatively positioned elements start right where they are.
  6. Fixed positioned elements stay put, and will not scroll.
  7. Monsters are only scary when you don’t know their names.

So I hope this makes you feel better about that crazy monster in your closet. .(JavaScript must be enabled to view this email address)?