The position property is one of those CSS properties that everyone knows about, but which can have more complex effects than most people realize. Since a lot of what I do relies on position, it’s worth quickly explaining how position matters.

Position:static

The default position property for all elements is “static.” This essentially means “no position”; the object appears wherever it’s supposed to appear given the HTML structure.

For most elements, this is just fine. But it can cause problems with structural elements. That’s because objects with position:static ignore positional CSS properties like “left” and “right” — and “z-index.” Static items cannot be moved around or layered.

Position:relative

An element with position:relative acts just like an object with position:static — except you can now apply layering and positional CSS. For a relatively-positioned element, properties like “top” and “left” move the object relative to where it would normally appear in the HTML flow. Putting “left:10px;” on a relatively-positioned element will push the element 10 pixels to the right of its normal, static position (think of it as adding 10 pixels to the element’s left margin).

Less well known is the fact that an element’s position setting also affects the positioning of child elements. We’ll go over that in detail a little later.

Position:absolute

Absolutely-positioned elements are removed from the regular HTML flow. As far as other elements are concerned, they have no height or width. For their part, absolutely-positioned elements ignore static elements when determining where on the page they should appear. This means, for instance, that “margin” has no effect on an absolutely-positioned element.

That can be confusing, so let’s say it another way and give an example.

The effect of positioning on child elements

When determining its own position, an element with “position:absolute;” ignores parent elements that have “position:static;”. It will align itself relative to the first parent element with a position other than “static”. If it doesn’t find one of those, it will position itself relative to the browser window  — essentially acting like “position:fixed;”.

Say we have the following HTML structure:

<div style="position:relative; width:400px; height:400px; background-color:yellow;">
    <div style="width:200px; height:200px; background-color:blue;">
        <div style="position:absolute; width:100px; height:100px; right:0; bottom:0; background-color:red; color:white;">
            Hi! I'm an absolutely positioned div!
        </div>
    </div>
</div>

The resulting page will look like this:

Even though the red absolutely-positioned div is contained within the blue div in the HTML structure, the blue div has no position applied to it. So the red div ignores the blue div and positions itself relative to their common parent, the relatively-positioned yellow div.

This isn’t intuitive, and it can cause confusion and unexpected effects. Luckily, there’s a simple remedy: give all your divs “position:relative;” by default:

div {
    position:relative;
}

This causes no harm, because a relatively-positioned div acts just like a static div unless you apply a positioning property to it. And it makes sure all of your divs can be given a z-index and will properly contain any absolutely-positioned child elements. If a div needs another position value, simply override the default setting.

Position:fixed

An element with this position ignores everything else on the page and aligns itself relative to the browser window. It’s only used in special cases. For example, you might use it to have a page footer that is always touching the bottom of the window. Give it a very high z-index, and everything else will flow underneath it when you scroll up or down the page.

Since a fixed-position element is not static, it can have z-index and will properly contain absolutely-positioned child elements.

Best practice

Because absolutely-positioned elements are ignored by other elements, you generally won’t use them by themselves. You’ll put them inside a relatively-positioned div that takes up space in the HTML flow, reserving an area for the absolutely-positioned elements to appear in.

For instance, say you have an absolutely-positioned div that you want to have centered on the page. You’ll recall that an absolutely-positioned element ignores “margin” values, so you can’t do the usual CSS method of centering:

    element {margin:0 auto;}

But if you wrap the absolutely-positioned element in a relatively-positioned div, you can use “margin:auto;” to center the wrapper, and the absolutely-positioned element will also be centered.

HTML

<div class="wrapper">
    <div class="absolute-div">
        <p>Absolutely positioned content</p>
    </div>
</div>

CSS

.wrapper {
    position:relative;
    margin:0 auto;
    width:200px;
    height:100px;
}

.absolute-div {
    position:absolute;
    width:100%;
    height:100%;
}

In this way you can use absolute positioning to build complex, layered objects, and still have them respond to other elements or the browser window.