MicroTut: How CSS Positioning Works

MicroTut: How CSS Positioning Works

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.

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

14 Comments

  1. vfxboy says:

    very informative.. thank you.

  2. schiwe says:

    same as vfxboy says, it's very informative.

  3. Ian says:

    I made a bulletin board once with absolute position.

  4. Bogdan says:

    Very useful..thanks..

  5. Fuad NAHDI says:

    Excellent explanation and very useful. thanks

  6. Shaz3e says:

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

  7. A reader says:

    Great microtut!

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

  8. Martin Angelov says:

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

  9. Sascha says:

    nice one! thanks for the tutorial!

  10. Gee says:

    Great...Thanks...

  11. neopia says:

    thx for the css positioning guide

  12. Andres says:

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

  13. Oscar says:

    Thank You, thank you, thank you.

  14. Govind says:

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

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links