When working with CSS, I have constantly encountered one particular property that is grossly misused – the position property. If you check out the source of almost any website you will see plenty of elements with randomly defined position properties. I just thought I’d clear up some of the confusion, as understanding this property will make your life significantly easier when creating layouts.
You have five values for the position property. They are:
staticinheritfixedabsoluterelative
The default value is static – this just means the element appears in the normal flow of the document. The other obvious one is inherit – this you should be familiar with as it is used as a value for most other properties and simply means that the property value is taken from the value of the same property in the parent element.
The fixed value means that the element is positioned in a fixed position relative to the browser window. You can define the position using the left, right, top and bottom properties. This is particularly useful for creating floating menus or buttons that you would like to be permanently available to the user.
Those are the simple values – it is with the final two that things get a little more complicated. Most people use the absolute value as a way to position an element in relation to the <body> tag. In actuality, this value breaks the element out of the normal document flow and positions it in relation to the first parent element that has its position value set to anything other than the default (static). Have a look at the following code (and bear in mind that I’m definitely not advocating the use of the style attribute – I’m just using it for this example):
Because the #second-parent element has a position value of relative (i.e. not static), the #child element will be positioned against its top left corner effectively ignoring the fact that the natural flow of the document would ordinarily place it inside #first-parent. As with fixed, you can use the left, right, top and bottom properties to precisely position the element.
The final value is relative. This simply allows you to position the element relative to where it would normally appear in the document. Just assigning an element with this value does not do anything on its own – you also need to define how you would like it positioned. This means that, in the above example, #second-parent will not have its position altered in any way by the relative value assigned to it. Once again, you will need to use the left, right, top and bottom properties to position the element. For example:
The #child element will appear inside the #parent element as the flow suggests, but because of the combination of its position and left values, it will have a left margin of 10px so will effectively be shifted 10px to the right.
The other property that you can use with relative in order to position your element is z-index. I’m not going to go into the details of that here, but basically what it does is position elements on top of each other – the higher the z-index value, the more likely the element is to appear on top. In order to use this property you need to have the element’s position set to relative.
Understanding this CSS property well will make a big difference to how you create layouts and should help you minimise the use of repetitive child elements to apply some simple positioning. Hopefully you should now be able to minimise the clutter in your HTML and remove arbitrary position values that have no real effect.
One thought