Nudging elements with position: relative

I find that most people are familiar with using position: relative; on a containing element so that its descendent can be absolutely positioned relative to that element. So to get this effect:

The positioning rules would look something like this:

.container {
	position: relative;
}
.container div {
	position: absolute;
	top: 20px;
	right: 20px;
}

Relative positioning is also helpful for positioning the targeted element relative to its expected position in normal flow.

Let’s say I have an image in my document:

<p>This is a paragraph</p>
<img src="img.png" alt="A man on a bycicle" />
<p>This is a paragraph</p>

By default, the markup above looks like this (see example 1 html):

But I’d like it to be pulled out a little for a magazine-like look. I’ll start by adding float:left; to the image so that my text can wrap around the image.

.container img { float: left; }

That will get me this (or see example 2 html):

But I want to pull the image off to the left so part of it is visually extending outside the article. I’ll specify 100 pixels to the left, but first I have to specify position:relative;.

.container img {
	float: left;
	position:relative;
	left:-100px;
}

Resulting in this (or see example 3 html):

Hmmm… but the text is continuing to wrap around the image as if it’s still in its original spot.

That’s relative positioning — the element can be visually offset from its position in the normal flow, but the browser reserves that element’s original space. In order to have our text flow around the image’s new position, we can use negative margins. Since I don’t want the text butting up against my image, I’ll just use 80 pixels instead of 100 pixels, which allows a 20 pixel gutter between the image and text.

.container img {
	float: left;
	position:relative;
	left:-100px;
	margin-right: -80px;
}

Resulting in our desired result (or see example 4 html):

Relative positioning is helpful for not just setting a context for the absolutely positioned elements within them, but can also allow more flexible positioning opportunities. Though this article only covered an example for pulling items left or right, the concept can also be applied to vertical offsets (top and bottom). In conjunction with negative margins, relative positioning can help some designs ‘break out of the box’ allowing elements to extend outside their normal containers.

5 thoughts on “Nudging elements with position: relative

  1. How would I accomplish this using HTML and/or CSS?

    Dropdown Box #1 Dropdown Box #2 Dropdown Box #3

    So that all three are on the same line and run across the page?

  2. Why not just set negitive margin on image? If you use overflow hidden to contain floated elements it will cut off anything sticking out!

  3. Thank you soooo much! You helped me with the css coding for my navigation bar in my site. I was having trouble repositioning icons and I needed the right css property to get it the way I want. Thank you! :)

Comments are closed.