Relative positioning can come in handy in CSS, you are much more powerful as a designer if you can place things in the exact location you are pressing towards. There are a lot of times when you want to put an object somewhere and you are unsure of how you are going to place it. Whether it be just outside of your box or just above another object. The position of your object in your HTML document is important in design. You can’t always just use the restrictive box for your web sites, web designs more and more are breaking out of the box form and becoming much more elegant designs.

When it comes to positioning things relatively it isn’t a complicated task, you just need to figure out how to differentiate between relative positioning and absolute positioning. When you are using relative positioning you are placing an object somewhere from top or left of the current position (relatively). Let me give an example of this idea.

#headerContainer {position: relative; left: 30px; top: -20px;}

This CSS example will position the headerContainer object 30 pixels from the left and move it 20 pixels from the top. You can use negative or positive space to place the object. This comes in handy any time it is needed. I try to avoid using positioning as sparsely as possible to avoid any cross browser issues that may develop from its use. This article is a complimentary article to using negative margin to position objects. With both of these ideas in hand you become a much more powerful designer and can move towards more complicated designs.

Popularity: 7%