elblogg

I started this morning learning something I should have known for ages. I have been coding HTML for well over a decade, and CSS for nearly a decade. I have even taught HTML and CSS both at the University of Bergen and for student groups at Bergen University College.

Of course, that’s no guarantee of how much I actually know about the subject, but I think I have a pretty good knowledge of HTML and CSS. Even then, how position:relative actually works has managed to slip completely under my radar. I find this rather embarrassing, but I write about it here, because if I haven’t managed to get this before now, there is probably several other webdevelopers that also don’t know this (I hope).

The functionality of position:relative is not complicated, it’s actually very simple, you just have to know this.

Positioning in general

Ok, let’s start with how the positioning in CSS works. If you only want to know about position:relative. You should jump to the position:absolute section and read on from there

You have two sorts of elements in CSS (actually there’s more, but there’s two significant sorts of elements): block level elements and inline elements. Inline elements flow with the text, and is always positioned using the flow around them.

Block elements may also flow with the text, but they always breaks up the flow, and is placed on a seperate line.

Okay, I wrote that they always occupies a seperate line. That’s as long as you don’t tell it to do otherwise. This can be done using the CSS keywords float, position, top, left, right, and bottom.. The simplest of these, and the most widely used are float.

float

You can float elements to the left or to the right. Flowing a block level element to the right will place it as far right as the parent element allows, and if the element is narrower than the parent element the text (or other elements) will flow around it.

example:

div.floating {
    width: 100px;
    height:100px;
    float:right;
    background:#CCC;
    margin:0 10px;
}

will make a div-element of the class “floating” look like the grey box on the right. Notice that this text will wrap around it. The floated element is anchored to the location in the text where it is coded. The grey box will always be located to the right of this paragraph even if I add thousands of lines of text above it.

position:absolute

Position:absolute takes the element out of the regular text flow, and places the element on the page according to coordinates. The coordinates are given by the top, left, right and bottom CSS attributes.

Here is an example:

div.absolutepositioned {
    position:absolute;
    top:100px;
    right:100px;
    width: 100px;
    height:100px;
    background:#CCC;
    margin:0 10px;
}

Imagine that the box below is a page.

Notice how the grey box is placed 100px from the top side of the “page” and 100px from the right side of the “page”. Also notice that the text doesn’t flow around the box, but is placed behind the box. This is an easy way to place elements around the screen, but it has low fault tolerance, since elements may end up being placed on top of eachother.

The top attribute controls the offset between the outer top side of the element, to the inner top side of the “page”.
The left attribute controls the offset between the outer left side of the element to the inner left side of the “page”.
The right attribute controls the offset between the outer right side of the element to the inner right side of the page.
The bottom attribute controls the offset between the outer lower side of the element to the inner lower side of the page.

position:fixed

Position:fixed works pretty much like the position:absolute, with the difference that the coordinates is relative to the sides of the viewing window in your browser. Elements that are positioned with fixed positioning will stick to the screen, and stay visible on the same place on the screen when you scroll down on the page. Internet Explorer 6 has no support for this, and this feature is therefore not used as much as you could think. I won’t provide an example for this, because it won’t fit on the page.

position:relative

Now to the thing I had wrong. position:absolute and position:fixed both modifies what the top, left, right and bottom attributes control. I thought this was the case for position:relative as well, and that the “relative” part meant that it would be relative to the location it’s coded (more like the float attribute). It is probably written a lot of places, but I thought I understood this so I never bothered to look. Of course I found it odd that not even Firefox or Opera worked the way I expected, but I didn’t think more about that. I have just avoided using this feature.

Therefore it was a great revelation this morning when I finally got how to use this. I was reading through some old “read-later” bookmarks, and came over this article in Smashing Magazine: Ask SM: CSS Quick-Question Edition. There @_Zapp (funny how similar this is to my nick, but it’s not me, promise.) had asked “How do you position stuff at the bottom of a div with (or without) position absolute and relative, so that it will look the same on all browsers.”. This caught my attention, because I had just had the same problem (since I had the position:relative stuff wrong).

Smashing Magazines answer was to use position relative on the box you want to place elements inside, and then use position:absolute inside.

In fact, I had to do this to show the position:absolute example above. The “page” here has style=”postition:relative”, and then the absolute positioned element inside is relative to the “page”. Without position relative, the grey box would have been placed somewhere around the header of this page.

div.virtualpage {
    border: 1px solid #cccccc;
    margin: auto;
    width: 400px;
    position: relative;
    height: 500px;
    font-size: 10px
}
 
div.absolutepositioned {
    position:absolute;
    top:100px;
    right:100px;
    width: 100px;
    height:100px;
    background:#CCC;
    margin:0 10px;
}