Relative positioning to control absolute positioned elements

Trust me! Initially I  had a big time, figuring out what’s with this positioning of relative and absolute.  Before i move into the details of this article, let me take a quick tour through the positioning css offers us.

CSS Position types:

Absolute : To position the elements absolutely or perfectly, with respect to a parent whose position can be anything other than static.

This would imply that you need some good parent who is positioned relatively or fixed or with inherited positioning. Top, right , bottom, left properties control the positioning here.

Relative : To position an element with respect to itself. Top, right , bottom, left properties control the positioning here, but they are with respect to the normal positioning of the element.

This would imply, you relatively position an element with itself. Kind of shifting the element, from its current position.

Fixed : To position an element absolutely, with respect to the browser window.

This would imply, you can position an element, with respect to your browser window. A simple scenario would be an always visible popup at the bottom right corner of your browser window.

Static : It is the default positioning property. This guy ignores any top, right, bottom, left property values.

Inherit : This guy blindly inherits the property of its own parent.

So now, let me come to the point here.

In most of the scenarios you might want to use an absolute positioned element inside a relative positioned element. Take a look at the scenario below:

Here the parent is relatively positioned. Look at the children. They are forced inside the parent, unless you give a negative value and forcefully move it out. But still, it will be under the control of the parent.

Lets see what would happen, in case you forget the relative positioning of the parent:

It might not look a big deal out here. But trust me, it can be catastrophic in various other scenarios. Here what happened was that, the children elements, skipped the parents boundary and decides to position with respect to the body of the page. So if the browser window grows, that one in the bottom left is going to stick with the browser window, not hang back inside like his well behaved brother from the first image.

Well once you get your head fixed to this concept (rim-shot), you will be able to find the application of this everywhere. Let me give you some good head start.

Examples:

	A “close” button you always want positioned in the upper right of a box (to replicate an operating system window).
	A “home” button placed in the upper left of the window so that your users never feel too lost
	A reminder on a sign up form to remind users that if they are already members to sign in above.
	“Back to top” links to be placed in the lower right of each big block of text.

Another example would be an always visible popup, like the one below:

Go ahead and explore to the widest of your imaginations. Hope you enjoyed this article.