CSS Tutorial - Positioning

position

Before I can start with the explanation of 'position' I have to squeeze in another little section. You will need to know 4 other properties, to work properly with 'position'.

left, right, top, bottom. As with the 'height' and 'witdth' properties explained earlier, they work with the absolute unit px (pixel) and the relative units (em, font size; and %, percent relative to the parent element).

top:5px; left:10%;

Back to 'position': So far, we still are not able to tell elements where to sit in a page, or containing block element. We can make things flow but that is not enough. For specific positioning one has to use the property 'position', with one of those values:

static - your normal every day box, no special behaviour, it's following the normal flow of the page (used to switch off a positioned behaviour).
relative - that first acts like static (normal flow), but then it will move as much left/right, up/down, as specified in the properties top/bottom and left/right.
Here is the example, some text, but also an image, without any top/left adjustment, but already with position:relative; . There is no distance to the text above, and there are no elements overlapping, everything flows normally. Since I did not add any line break, the images just are part of the normal text lines. Now we add the picture a second time, but with top:30px and left:30px: . Now you can see there's a gap above that picture, and the picture is partially in the text of the following line. But it's still part of the normal flow, still inside the text line, and still pushing that text line to a huge line-height.
absolute - you give the position of the element (in absolute units (px) or relative units (em, %) relative to the upper left corner of the containing box.
Absolute positioned elements are completely taken out of the flow of elements, meaning that they are not pushing the following elements away. The next element will just come right after the previous element, like so:
This text comes first in the code, before the little div with the blue background.

this div here has no 'position' value set, so it just flows normally.
And here some more text, and the end of all.
code of the blue box:
<div style="position:absolute; top:10px; left:10px;
<div style="height:50px; width:50px; border:solid blue 2px; ">
</div>
this very box here is also absolute positioned:
bottom:3em; right:5px;

You can see that the blue box is put on the screen without any regard of the other elements in the containing block. The text and the green box are just floating as if the blue box wouldn't be there. That's important to know, if you want to absolute position an element, and have the rest still not write over that (or disappear under it), then you will have to absolute position the other elements too. Just remember that people have different sized browser windows open, on different screen sizes, with different fonts. So it would be better to not use absolute position elements with fixed units (like position:fixed; top:200px; left:20px;), but with relative units: 20% to the left, 20% from the top. Still, absolute positioning is a bit tricky because you never know in what environment your page will be viewed.

Here we have a big box with purple border, inside are two absolute positioned images (the spider is sticking out on top of the purple box because with 'top/bottom' and 'left/right' negative values are allowed, and the spider image has a value of top:-10px;
Resize your browser window now, and watch the position and behaviour.
(since the box only contains those two absolute positioned images, the box would be zero pixels tall (remember, absolute positioned elements don't affect the behaviour of other elements), so I had to give that container the specific height 120px.
Important: When you want to absolute position elements inside of a box, then that containing box needs position:relative, or you won't get what you want; the containg box with the purple border also has a position style: position:relative;
If we would not have done that, the images wouldn't adjust themselves to their container (purple border), but to the browser window, meaning they would appear at the top of this rather long page! Those two (absolute, relative) work hand in hand.
fixed - this acts mostly like 'absolute', with one change: the position doesn't change when one scrolls the page. That's a neat effect for placing logos or other things, letting them sit unmoved at their positions. Just like the little image of the bearpaw in the upper right corner. I am sure it was bugging you all the time... the code for it is actually here after the text.

<img src="PawRight.jpg" style="position:fixed; top:15px; right:5px;" />