The Art of CSS Positioning

CSS Positioning is one thing I used to struggle with, hopefully I can help you understand how positioning works and what it’s affected by, and iron out some of those kinks.

Let’s get one thing straight: positioning is vital in web design. When you have odd issues between browsers where elements vanish, don’t show or are a few pixels out of alignment, it’s normally because you are guilty of using margin and padding for positioning your elements. This is wrong because margin and padding were not designed to do that. (of course, if each browser was compliant with web standards there probably would not be an issue).

Positioning exists to allow exact placement of elements within your markup, simple as that. This tutorial aims to help you understand CSS positioning, which will become one of your most valuable assets in transferring your design to HTML/CSS.

Positioning comes in 4 flavours: absolute, relative, fixed and static. You will see them like this:

#ourElement { position:relative; top:40px; left:200px; }

Absolute Positioning

Absolute positioning is exactly what it says, absolute. It allows for top, left, bottom, and right attributes to be set so it knows exactly where “absolute” is.

Imagine we have a field and around the edge of the field is a solid white line, like a football pitch. Inside this field we need to place a large red square and we have not been given any instructions of where to put it, so we decide to put it in the top left hand corner.

Now the football coach comes and asks us to place the red square 10meters in from the left, and 30meters down from the top. We are able to do this easily as we have clear instructions (and he probably gives us a tape measure).

We have successfully positioned the square! This is basically what the browser will do. The field is obviously the browser window, and the white line is the screen boundary. No matter how much you move the browser window or resize it, it will always stay the set distance away from the top & left edge.

So let’s take this to the next level, a real world situation. We have our wrapping div centred (using the wonderful margin:0 auto; trick). The CSS looks a little like this:

#ourWrap { width:300px; margin:0 auto; }

We drop a square div element in and colour it red, it defaults to the top left of the wrap, as we think it should.

We now need to position the red div inside this wrapping div, and we need it to be “left:50px; top:60px;”. We set position to absolute, add the left and right parameters and suddenly our box is miles away from where it should be.

#ourElement { width:300px;  position:absolute; top:60px; left:50px; }

Now this is where people start to hate positioning.

But what has gone wrong? We have our wrapping div centred, and we put the element we are trying to position inside that wrap!

Well the problem is, the wrapping div is working fine, but it doesn’t really know where it is. What we need to do is give it a position.

Now you might think that giving it a position would remove the centre float, if it was an absolute position you would be right, but we are going to give this element a very passive position. This position will solidify it allowing any element placed and positioned inside it to get its position from the wrapper’s boundaries, and not from the browsers.

The position I am talking about is relative, which is what we shall be moving onto.

So we add position:relative; to our wrapper div, and it works!

#ourWrap { width:300px; margin:0 auto; position:relative; }

Things to note about Absolute positions.

When it says absolute, it means absolute. It will not see its sibling objects (elements that are positioned within the same div) and set itself relative to them, it will pretty much stomp all over everything to get to exactly where you want it. Normally if you are positioning elements absolutely, you will need to position every sibling object absolutely too so you can get the correct spacing. But don’t fret this is an extremely accurate way of layout a site, and even IE can count positioned pixels properly… When setting position attributes top, right, bottom, left, only use two of them. One top or bottom, and one left or right. Positioning something like this is pointless:

#ourElement { position:relative; top:500px; bottom:500px; }

Summary.

When positioning an element within a containing block element like a DIV, give the container a position of relative and your absolute positioning will be relative to that containing element.

Relative positioning

Relative positioning is excellent, although it’s not as good at physically positioning something like absolute. It is extremely passive and allows elements with absolute positioning to be, accurately placed within them (see above).

When you position an element relative, it renders in the place the browser would have put it by default, and then it will position itself relative to its rendered position.

Let’s go back to the wrapper div for an example.

Say we have our wrapper div centred, and its positioned relative so that we can use positioning inside it. Inside that box you place a white square, and give it a position of relative, this square will now sit where it would have been rendered without any positioning. Now if you give it a left value of say 5px it will instead of fixing itself 5px from the edge of your floating box, it will move itself left 5px from where it was placed.

So relative positioning is relative to where the object would have been rendered.

Because of this it’s also friendlier to other objects, unlike the bullish attitude of the absolute position.

Things to note about relative positioning:

Because it sets its position (left, top, bottom, right) from where the browser would have rendered it, it will leave a gap where it once was. For example if you moved your relative object up the page with a minus setting, the space below it, where it was rendered, would not be take up by the content below. You would be left with a hole where your element was (See pic).

The red box indicates where you would normally see the paragraph render, the rest of the content will still see it as there so it will not move up by default.

Summery.

Relative positioning places the object where by default it would be, and then from that position moves it with the set (top, left, bottom, right) parameters.

Fixed positioning

This one is easy to understand for anyone who has ever used a fixed background position. If you have an element that you do not want to scroll when you scroll down a page, then you can use a fixed position to keep it where you need it to be. For example, you might have a twitter icon that you want to keep 10px from the right and 10px from the top of your browser window even when you scroll down the site. If you use fixed positioning it will stay exactly where you have placed it. Because this one is easy to visualise I will show you an example.

www.designyoutrust.com

Top right, you see that twitter icon? If you scroll the page it’s fixed at the top right, that’s what fixed positioning means.

Unlike absolute position (above), which would get its position from the element it was contained in, fixed positioning will only ever be fixed to the browser window.

Summary

Fixed positioning doesn’t scroll, and only ever gets its position from the browser window, so use it wisely!

Static Positioning

Static positioning is the browser default, and it’s the most common form of positioning. In most cases, you won’t have a reason to actually declare position:static; on an element unless it has inherited a different kind of positioning from another element in your style sheet.

Because static positioning is the default, you should be relatively familiar with its behaviour, and as such, I won’t go into detail.

Things to note about static positioning:

This is the default setting for the elements in your markup. It keeps them in a normal flow, with attributes top, bottom, left, and right having no effect.

Summary

Static positioning rarely needs to be explicitly declared, with the exception being an element that has inherited another type of positioning from somewhere else in the style sheet.

I hope this has helped in your quest to understand positioning! It can be a tricky subject to master but once you figure it out, it will all fall in to place.