CSS Absolute Positioning

Absolute positioning is a very powerful CSS technique when used properly. Traditionally, when you use

tags and the like, everything in your page design is generally stacked from top to bottom. Using absolute positioning gives you the freedom to place elements of your page just about anywhere you’d like. Here are some fundamentals of absolute positioning that can make your design appear more fluid, elegant, and easier to manage.
What is absolute positioning?

Absolute positioning can be frustrating if you don’t have a sound grasp on what it is and how it works. Let’s start at the very beginning.

Every block element on a page (

,

,

, etc.) has a CSS property called position. By default, the position for these block elements is set to static. Static block elements appear in a stack on the page, from top to bottom. Here’s an example:

Div One
Div Two
Div Three

Div One
Div Two
Div Three

If you change an element’s position to absolute, however, its placement on the page is very different. The placement for an absolutely positioned element is relative to the parent of that element. What does that mean? Let’s see what happens if we take the same code from our last example and make our block elements position: absolute.

Div One
Div Two
Div Three

Div One
Div Two
Div Three

The outcome is very different! You can’t tell, but the first and second

tags are actually hiding behind the third

tag. Whenever you set an element’s position to absolute, it is automatically shown at the top-left corner of the parent element (* see notes about relativity below). This isn’t very useful now, but we can apply this technique to create a variety of simple and effective layout styles.
Positioning

Our last example wasn’t very practical simply because all of our

tags were stacked on top of each other. Using the top, bottom, left, and right properties, we can position absolute elements anywhere we’d like. Let’s try it out.

Div One
Div Two
Div Three

Div One
Div Two
Div Three

Now that’s a little more practical. The first and second

tags are positioned using pixels from the top, left, and right sides of their parent element (the gray box). I positioned the third

tag a little differently just to demonstrate how you can use all the different measurement units that CSS has to offer in order to position absolute elements (px, pt, em, and %).
Relativity

The most difficult and confusing aspect of absolutely positioned elements is figuring out relative positioning. Unless you specify otherwise, your absolute

tags will be positioned relative to your entire HTML document (i.e. the very top left corner of your browser window). Basically, when your browser is trying to render an absolutely positioned element, it traces upward through your HTML hierarchy until it finds a parent element that uses relative positioning (position: relative). If you haven’t set any elements to position: relative, then the tag is used by default. Always set the outer element to position: relative:

Contact Us / Register / Log Out

Contact Us / Register / Log Out
Relative Parent Height

If you place an absolutely positioned element on a page, it does not have a layout height associated with it. That means that even though your absolute DIV is 150 pixels tall, it will not bump the rest of your page down by 150 pixels. Here’s an example:

Div One

Div One

The easiest way to avoid this is to set the parent element’s height to a fixed value. This should clear up any layout height issues because you’ll always have space for your absolute elements. For instance:

Div One

Div One
Absolute vs. Floating

Absolute positioning shouldn’t be used in every case. Often times, I will use it to build out a header on a page where there is a logo, search, some utility links, etc. These types of controls are pretty consistent and don’t change in size, and absolute positioning comes in quite handy. There are, however, some disadvantages to using absolute positioning. Most importantly, absolutely positioned elements don’t appears as part of the normal layout flow in your document. They have a fixed position, which often confines them to a fixed width or height. If you can’t predict the size or consistency of the content in a particular page element (for instance, a page content area where article text appears), then absolute positioning is probably not the best option.

As an alternative, you can use CSS floating to create very fluid and flexible layouts without absolute positioning. See my previous article about tableless column design to learn more about floating elements in your design.

Advertisements
By Rz Rasel Posted in Css

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

July 2012
S S M T W T F
    Aug »
 123456
78910111213
14151617181920
21222324252627
28293031