In my 20/20 CSS properties to learn and love I didn’t include ‘position’. So what is the position on position? The odd thing with position is that despite its name you can do an awful lot of layout positioning without it. Lots of web designers, and indeed frameworks like the 960 grid, solved the layout issue without recourse to position but instead rely on float (float your boat here). Float itself relies on something called ‘normal flow’ and it is normal flow that really lies at the core of an understanding of ‘position’.
With all these references to CSS properties it is important to remember that your HTML Structure is very important – it dictates what is called ‘normal flow’.
Normal flow is the order in which the HTML elements would be displayed without any CSS interference. Block elements like
<div>, when in the normal flow, appear top to bottom. That is elements higher in the code go at the top, ones that follow go after them. Inline elements like
<span>, when in normal flow, appear left to right. So content you add after other inline content is placed to the right of it.
Normal flow is kinda common sense when you think about it. When you open a new document in a word processor – the cursor is blinking away in the top left corner. Paragraphs follow one after another down the page and text flows left to right.
Tip: Remember the CSS display property can be used to change the default display type of an element ie make a block
<li> behave as if it is an inline element.
The most likely position value you will come across is ‘position:absolute’. This value removes the targeted element from the normal flow of the document. As such its position in the document is no longer impacted by other elements. This has the effect of letting the absolutely positioned element float (lets not use that word), sit or layer on top of the other elements in the page.
If more than one element is positioned absolutely then the z-index property can be used to stack the elements on top of each other like a pack of cards, or like layers in Photoshop (one for you crazy Graphic Designers out there). The higher the z-index the higher the element is in the stack. When no z-index property is provided then normal flow comes back into play in that the last element ‘in’ sits on top of the stack. If you think about it that makes perfect sense as content lower down the normal flow is rendered by the browser after content before it – so ends up on top.
When positioning something absolutely the CSS properties ‘top’, ‘bottom’, ‘left’ and ‘right’ can be used to place the element a given value from the chosen margin ie top:100px would see the element placed 100px from the top of the page.
One last thought on absolute positioning. When something is positioned absolutely the top, bottom, left and right values are ‘relative’ to any (non static) positioned parent. What, run that by me again? If you nest a
<div> within a
<div> and the first is given a top property value of 10px and the nested
<div> a top property value of 20px – then the nested
<div> is 30 pixels from the top of the document. We could describe this as ‘relative’ to its parent – BUT THIS IS NOT relative positioning. We’ll see what that is next.
And another one last think – we often use
By setting the position property to the value ‘relative’ an element can then be repositioned using the top, bottom, left and right CSS properties. The element is moved relative to where it would appear in the normal flow. Unlike with absolute positioning the relatively positioned element stays in the normal flow.
Where would you use this?
You can use position relative to nudge content/offset it from its normal flow position. The word offset here has been set relatively with a bottom value of 5px so it appears above the line.
Another trick is to give a container element a relative position but no top, bottom, left or right values. This means the element stays exactly where it was. However, because it has a position property (admittedly doing nothing), nested elements inside the container can use position absolute ‘relative’ to the relatively positioned container.
To help grasp these concepts have a play in the position playground.
Hopefully you are getting a picture as to why float remains a popular first choice when laying out a page with CSS!
When an element has the position property fixed, you guessed it, it is fixed. When the page is scrolled the element remains fixed. Where it is fixed depends on the top, bottom, left or right property values assigned to the element. In actual fact ‘fixed’ is very similar to ‘absolute’ in that the element is removed from normal flow thus allowing other content to be scrolled underneath it. This trick is often used to create permanent headers and footers that can be placed above the other content of the page.
Warning: If you are unlucky enough to have to support IE6 then sorry position:fixed is not supported.
Before we get onto some new goodies we must not forget position:static. This is the default value for position. It is the value that an element will have if no position property is set. And as you now appreciate that means it will appear in the normal flow.
When would you use position static?
The Future Sound of Layout
With CSS3 there are new tools coming to help out us poor web designers. Look out for the multi-column module with the likes of column-count, column-width and column-gap to make column design easier.
Also we will one day be able to use something called ‘FlexBox’ with its flex-grow, flex-shrink and flex-basis. Good old float will also find itself under siege from the likes of display:grid, grid-columns and grid-rows.
Finally the position property may get a new property ‘center’. Centring content horizontally and vertically with CSS is somewhat counter intuitive at the moment, but ‘center’ promises to do it in one fabulous piece of CSS wizardry. Keyword here – promises. It appears in the W3C CSS3 spec but I haven’t yet seen it working in a browser.
The future’s so bright I’ve got to set opacity to 75%.
Position Properties Summary
|absolute||Removed from normal flow. Has z-index and top, bottom, left and right properties used to place absolutely where required.|
|relative||Element placed with reference to top, bottom, left or right properties relative to where it would normally appear.|
|Fixed||Element fixed in position. Does not move from given top, bottom, left or right properties.|
|Static||Element returned to the normal flow.|
|center||Not yet with us but is supposed to centre the element horizontally and vertically within its parent.|