MicroTut: How CSS Positioning Works

Demo Download

Undoubtedly, the position property is one of the most useful tools that designers have in their CSS toolbox. However, there are a few concepts about positioning that might baffle beginners.

First, what is positioning?

When your browser opens a webpage, it starts rendering elements (divs, paragraphs, headings etc.) in the order they appear in the HTML markup of the page. Positioning is a natural way of organizing how the elements are displayed and an easy resolution to situations like overlaps. There are four types of positioning: static, relative, absolute and fixed.

Elements are statically positioned by default

The default positioning, which is implicitly applied to every element on the page, is static. Static positioning means that every element is positioned in the natural order it is added to the page. Block elements are displayed under other block elements, and inline elements are displayed next to other inline elements.

Relative positioning

Setting the positioning to relative does not by itself produce any noticeable difference in the way the element is displayed on the page. But you can now move it from its normal position with the top, left, bottom and right CSS properties. This comes really handy when dealing with situations in which you need to offset an element, but not anchor it to a specified position on the page.

.relativeDiv{

    /*
        Moving the div to the top-left
        from where it would normally show:
     */

    position:relative;
    top:-50px;
    left:-100px;
}

Fixed positioning

Adding position:fixed to the CSS declarations of an element, positions it in relation to the browser window. This allows you to display toolbars, buttons or navigation menus, which are anchored at a fixed position and scroll with the page.

.fixedDiv{

    /*
        Fixing the div 20 px from the bottom
        of the browser window:
     */

    position:fixed;
    right:20px;
    bottom:20px;
}

Probably the only drawback is that this positioning is not supported in older browsers like IE6, if you can't afford the luxury of dropping support for these.

Absolute positioning

An absolutely positioned element is displayed on the page in relation to the document, or a parent element with a positioning different from static. This way, using the top, left, bottom and right CSS properties, you can specify an exact position. This also gives you the ability to center divs horizontally and vertically, which we discussed in the "Centering a Div Both Horizontally And Vertically" MicroTut.

.parentDiv{

    /* Absolute and Fixed positioning would work as well: */

    position:relative;
}
.absoluteDiv{

    /*
        Displaying the div 50px from the right and 90px from
        the top of its parent because of the explicit positioning
     */

    position:absolute;
    right:50px;
    top:90px;
}

The benefits

Using these positioning properties you can achieve all kinds of advanced page layouts, which will bring your designs to the next level. In conjunction with the z-index property, you can change the default overlay rules that apply to elements (elements which appear later in the code are shown above the previous ones).

What is the coolest design you've done with the positioning properties? Brag in the comment section below.

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

very informative.. thank you.

same as vfxboy says, it's very informative.

I made a bulletin board once with absolute position.

Very useful..thanks..

Fuad NAHDI

Excellent explanation and very useful. thanks

well that's good explanation and examples but is there any other way for IE all versions

A reader

Great microtut!

But isn't there going to be a regular article this week?

Martin Angelov

Yes there will be a regular article. It's just a little late.

nice one! thanks for the tutorial!

Great...Thanks...

thx for the css positioning guide

You do a great job of explaining fundamentals in an understandable way.

Thank You, thank you, thank you.

You do a great job of explaining fundamentals in an understandable way...Thank You, thank you, thank you.Thank You, thank you, thank you.