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:
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.
fixed value means that the element is positioned in a fixed position relative to the browser window. You can define the position using the
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):
<div id="second-parent" style="position: relative;"> <div id="first-parent"> <div id="child" style="position: absolute;"> Content to be positioned </div> </div> </div>
#second-parent element has a position value of
relative (i.e. not
#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
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
bottom properties to position the element. For example:
<div id="parent"> <div id="child" style="position: relative; left: 10px;"> Content to be positioned </div> </div>
#child element will appear inside the
#parent element as the flow suggests, but because of the combination of its
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
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.