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: staticrelativeabsolute 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 topleft,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.


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


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.


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


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 topleftbottom 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.


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


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


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.

One thought on “How CSS Positioning Works

  1. Hello! I know this is somewhat off topic but I was wondering if you
    knew where I could locate a captcha plugin for my comment form?

    I’m using the same blog platform as yours and I’m having problems finding one?
    Thanks a lot!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s