CSS Positioning – Relative and Absolute

CSS Positioning – Relative and Absolute

It takes all types

There are four types of positioning: static, fixed, relative, and absolute. Static is the default position state which means it isn’t positioned. It goes where it normally would on the page. Fixed is positioned relative to the browser window, and won’t move even if the window is scrolled. Relative positioning allows you to use the top, right, bottom, and left CSS properties to position an element relative to where it would appear in the document. Absolute is the tricky one, because it is basically removed from the document, and placed EXACTLY where you want it to go.

A note on :relative

If you position something relative, and then use top and left to shift it over, don’t expect everything below it to shift as well. It still occupies the space in the document normally, you are just shifting it from its initial placement.

Let’s take a look

View the following demos to get a clearer picture of what I am talking about.

When you position something absolute, you need to remember that it is removed from the flow of the document – everything else will ignore it. The element is positioned relative to the first parent element that has a position other than static, if there are none, it will use . If that is the case, and you set the element’s top and left to 0, it will appear at the very top left edge of the window. No matter how you resize that window, that element will always be at the very top left. Take a look at what we would have.

View Demo

Here is what the css looks like:

#one {
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 0;
	left: 0;
	background: #ff0000;
	width: 200px;
	height: 50px;
}

How to put it where you want it

Let’s say though, that you want an element in a specific spot that shows exactly where you want it all the time. Easy. Position one of its parents to relative!

View Demo

Here is what the css would look like:

#one {
position: relative;
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 50px;
	left: 500px;
	background: #ff0000;
	width: 200px;
	height: 50px;
}

All that was changed, was adding position: relative to div #one, and changing the top and left numbers to div 2. Change them to 0 using Firebug, and you will see that 0 means positioned at the top left of div #one now.

One is never enough

Ooohhhh…I get it, you can’t just have one. You want another div there positioned absolutely. AND…you want this new div to appear under the red one.

View Demo

#one {
position: relative;
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 50px;
	left: 500px;
	background: #ff0000;
	width: 200px;
	height: 50px;
	z-index: 2;
}
 
#three {
	position: absolute;
	top: 85px;
	left: 550px;
	background: #999900;
	width: 200px;
	height: 50px;
}

All I changed there, aside from adding the styles for div #three, is add z-index to div #two. It doesn’t matter what order the absoluted divs are in, just what z-index they have. Whichever element has the higher z-index, will show on top.

Closing thoughts

CSS positioning is actually very easy. Once you know how to use them, figuring out why an element isn’t positioned the way you thought it would be, becomes a lot easier, too. I can’t think of a time where I have used :fixed, but :relative and :absolute are thrown around enough that it is a must to learn if you haven’t yet. Hopefully now, you get a more clear picture of what they do, and how to control them! Let me know if you have any questions.

Coupon Code: webmachine

Tags:

One Response to “CSS Positioning – Relative and Absolute”

  1. [...] it needs to go, so you end up with a top margin of like -240px or something. Bad. Get a handle on positioning divs and this will never happen again. IE doesn’t play nice with the whole negative margin thing. [...]

Leave a Reply