What is position:relative useful for?

Question

I was thinking about CSS positioning modes today and realized that I never use position:relative for anything other than making position:absolute work on child elements.

I'm more of a "developer" than a "designer", but I've done quite a few CSS-based layouts over the years. I've used tables, float, margins (positive and negative), position:absolute, and even position:fixed, but I don't think I've ever had an occasion where I've used position:relative for actually positioning an element.

Is there some great CSS-guru technique that relies on position:relative (and is used in real-world designs)? Am I missing out?

Answer 1

I've used it more than once to display things like header images, something like:

<div id="header">
  <div id="logo"></div>
<div>

CSS:

#header { width: 1024px; margin: 0 auto; background: url(string.jpg); }
#logo { position: relative; left: 40px; background: url(logo.jpg); }

In this case the header has a large stripe all the way across as a background image, the logo sits in the stripe just offset a bit. Simpler than padding/margin in some cases to shift stuff around a bit I think, maybe it's just opinion.

Answer 2

I mainly use it when I want to position some absolute element relative to its parent element. In that case the parent element need to be set to position: relative. That's where it is for.

Further I also use it here and there to fix IE6/7 haslayout/flickering bugs in block elements with a background image.

Answer 3

I've used posotion: relative in the past for a container element, with absolutely positioned elements inside it (like a centered three column layout). For example:

I don't give the container any offset, but positioning it with position: relative allows me to absolutely position the columns relative to the container. If the container is set to position: static, as it is by default, then the columns will be absolutely positioned relative to the browser viewport, not the container.

Answer 4

It's useful if you want to offset an element without futzing around with margins and its consequences for other elements. Let's say you want to intentionally have an image poke out of the side of a container and (nearly) overlap with some content in a container beside it.

------------- -----
|           | |   |
|   X  -------| Y |
|      |  a  ||   |
|      -------|   |
------------- -----

Container a is part of the normal text flow of X and you want to keep it that way, you just want it poking out of the side a bit as a neat effect. If you do that with margins, it may get really messy and reflow some of your other content.
By using position: relative; left: 10px; you can get that effect easily without the side effects.

Answer 5

I use position:relative; so that superscript characters can still ascend above vertical-align: top; but doesn't allow them to mess with the leading of my paragraphs.

sup { 
    font-size: .7em;
    vertical-align: top;
    position: relative;
    top: -.1em;
}