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:
static
inherit
fixed
absolute
relative
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