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

Det begynte egentlig med at jeg så på en post jeg hadde skrevet og tenkte “Hm, de taggene der ser ikke ut som om de egentlig hører hjemme der”. Videre tenkte jeg, hva skal jeg gjøre for å få dem mer inn i det visuelle uttrykket på bloggen. Det hadde vært fint med noen bilder, men da må jeg vedlikeholde en haug med bilder for alle taggene. Det har jeg forsøkt før, da bare for kategoriene, og det er nesten ti ganger så mange tagger som kategoriene.

Hva om jeg kunne lage en bakgrunn som fikk merkelappene til å se mer ut som merkelapper? Vel.. min assosiasjon til merkelapper i denne sammenhengen er slike brune lapper som brukes på postsekker. Jeg kunne alltids lage en bakgrunn som så slik ut, men jeg syntes det ville være rart om de bare gikk rett horisontalt.

Her kommer vi til en av de tingene som jeg har savnet i CSS. En mulighet til å rotere objekter.

Velvel. vi kan jo alltids generere bilder på serveren, og bruke det… Og det var akkurat det jeg endte opp med også. Ikke bare får jeg da generert merkelappene slik jeg vil ha dem, men jeg kan velge den fonten jeg vil ha også, selv om webfonts ikke er støttet i nettleserene enda.

Resultatet er merkelappene nedenfor, og php-koden som genererer dem finner du her
Og her er det jeg brukte for å putte det inn i wordpress-temaet

Jeg glemte å nevne hvordan en faktisk kobler sammen stilarket og html-dokumentet. En kan enten putte stilarket i head-delen av HTML-dokumentet, inni en <style> blokk.

For eksempel:

<style type="text/css">
a {
text-decoration:none;
color:#FF0000;
}
</style>

Eller, dere kan (helst) ha stilarket i en fil, da refererer dere til stilarket med en tag som denne:

<link rel="stylesheet" type="text/css" href="adresse til stilarket">

Sett inn adressen til stilarket der det står adresse til stilarket.

Til dere som lurte på hvilken editor jeg brukte på mandag: Editoren jeg brukte heter Komodo Edit eller Open Komodo, og er tilgjengelig for Mac, Linux og Windows

Lykke til.

• Part 1 – Covers “display” and “position”
• Part 2 – Covers more “display”, “overflow” and “float/clear”
• Part 3 – some CSS3 stuff…

If you have a mac, grab them at his blog

I have made a modified version of the previous set of widgets for Linux, and I will try to make a linux-set of these too, and publish them here (if I’m allowed to to so)

There is one thing wrong with it when you uses it on Linux, the focus rings is in black and are annoyingly bold. I will maybe create a modified version of it where this is fixed.

meanwhile, get the stylesheet at Kevins blog

• HTML 4.01
• CSS2
• XHTML 1.1
• XHTML 1.0
• CSS3