learn web technologies, the easy way

CSS Relative Positioning

Relative Positioning

Relative positioning is a very powerful tool in your web arsenal. It allows you to use the container model for laying out your site, and gives you the ability to place your page elements where you want within the container.

The actual meaning of "relative" when it comes to CSS positioning is: Display a page element at a place (specified by "left", "right", "top" and "bottom") relative to where it would have normally appeared. In other words, without any type of positioning, a HTML element will be displayed in the next free place. If you apply relative positioning to that element, its position will be offset from that "next free place" by the values you specify.

Let's start with a browser window with two colored rectangles displayed without any positioning:

Now we'll show the same two rectangles, the first with a "left:50px" offset, and the second with a "top:200px" offset, using these divs:

<div style="position:relative; left:10px; width:120px; height:80px; background-color:green">

<div style="position:relative; top:100px; left:50px; width:100px; height:60px; background-color:yellow">

See how the positions of the boxes changed relative to the original position. Take a look at the first <div> above this figure. The key parts of this <div> tag are the "postion:relative" which tells the browser to position this element using CSS relative positioning. The "left:10px;" means display the contents of this div 10 pixels away from the left side of where it would have been without the position clause.

That's all about CSS positioning for now, let us know if you'd like to see any other subjects covered. Good luck!