CODEWITHSUNDEEP
csscss-position
Craig Walker
Craig Walker

Reputation: 51787

What is position:relative useful for?

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?

Upvotes: 6

Views: 2160

Answers (5)

Ben
Ben

Reputation: 1012

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:

alt text

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.

Upvotes: 6

mark123
mark123

Reputation: 1063

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;
}

Upvotes: 2

deceze
deceze

Reputation: 522597

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.

Upvotes: 6

BalusC
BalusC

Reputation: 1109645

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.

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630607

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.

Upvotes: 1

Related Questions