Many webmasters, who are still new to the webmaster world or are still learning CSS, have often pondered on this… Many of my students have asked me about this… many of my friends who are in to the same business as I have wondered why we, who have learnt the hard way do it.. What am I talking about? Positioning in CSS, more so the relationship between absolute and relative positioning in CSS.

So is it Relatively absolute or Absolutely relative?

Whenever you are designing with CSS, more often than not, there will be times when you would have to nest divs. These nested divs could be relatively positioned or absolutely positioned. The more often used one would be nesting an absolute positioned div within a relative positioned div, albeit a relative positioned div wrapped around an absolute positioned div is also quite as famous. Huh?

Ok, Sherlock, here’s the 101 on it. An absolute positioned div or element is positioned with regards to the containment block. Any and all elements are considered to be positioned elements if they are either have relative, absolute or fixed positions. Any of the values, except static, assigned to the position property of a element, gives the element a “position”. Static is default value for most browsers, and if no value is specified(one of the values from the above three), static is taken as the default value. Static also means that the element is within the “normal flow” of the document, in regards with other elements in the web page.

An absolute-positioned element within a web page, having no containing block(s) [i.e. Having no ancestor elemets or having ancestors elements that are not positioned] is always placed in regards to the web page/browser render screen boundaries. Then such an element is known as the “initial containing block”.

For e.g :

#Main_Wrapper{
position:absolute;
top:0;
left:0;
}

The above element [i.e. Element with the id parameter set to “Main_Wrapper”] would be positioned on the top left hand side of the web browsers render area or screen media, only when the said element has not ancestral elements. But, if the above mentioned elements has any positioned ancestral blocks, the element would be positioned on the top left corner of that ancestral element.

Absolute Twist, anyone?

If, the above shown element, has any siblings, their positions are now reset to the boundaries of the ancestral element block! Not of the absolute-positioned block.

CSS Yap Yap Yap…

This does sound unwinding and at the same time ever winding to me. Lets see it action..
During the design of one of my templates, lets call it AlphaZone, I had positioned the
right column as absolute. Since I wanted the right hand side column to be appearing right below my template header. I never wanted an overlap or gaps between the header block and the right column block. My Header contained, a logo, a few links and a “call statement”. Because the links were in h1 tags and were basically texts. This is the reason the navigation could be resized by the browsers, since many people have different default text sizes along with different browsers rendering texts differently. This was the reason behind, me not positioning the right column in context to the screen media boundaries or page boundaries. If I would have, the right column would have overlapped the header for a number of people, using various browsers. So, What I did is absolute-positioned the header, and then created a wrapper block known as #wrappercontent, that would engulf the right column, main content pane and the left column. The main wrappercontent block was relative-positioned. This provided the container or wrapper to flow with the normal flow of the page. This way I achieved the results of having the container block being present below the header no matter what text size or browser or resolution.

Now for the relative revelation…

Since the main wrapper is relative-positioned, all the blocks or elements within the container block would have their positions reset and would have the position adhering to the #wrappercontent block as the containing element or ancestral element. Thus, the right column #rcol, would be auto positioned on the right hand side of #wrappercontent and would be positioned based on this ancestral element. It wouldn’t bother to be positioned on the top left or top right corner positions and this would also allow the right column to adjust vertically for different resolutions.

CSS Butt Hugging, are we?

Ok here is the rope-a-dope. I would have directly set a top-margin property for the top navigation, but I did not. Why? Same reason as above, texts, browsers and resolutions. The border or margin would have resized based on the above three influences. So what was eminent and still is, that The navigational links within the h1 tags were put into an element, which was relative-positioned within an ancestral element that was absolute-positioned, adding to this relative positioning, I also stated the height in pixels, 122px for the nav div, or #nav. This solved the margin or border dilemma.

The other way out …

Off course there are other ways of resolving the problem statement above, but to give you guys a rough idea of ancestral elements and the relationship of relative and absolute positioning, I took the above mentioned example. Perhaps this technique is now more clear to you guys.

CSS Resources..

Absolute Vs. Relative Positioning@ webdesign.about.com/od/advancedcss/a/aa061307.htm
Layers, Absolute and relative positioning@ www.yourhtmlsource.com/stylesheets/csslayout.html