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

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.