CSS Position (CSS Advanced Topics part 3)

With the knowledge of CSS Positioning you will be able to manipulate the exact position of your HTML elements. Designs that previously required the use of JavaScript or HTML image maps may now be done entirely in CSS. Not only is it easier to code, but it also loads much quicker!

Position Relative

Relative positioning changes the position of the HTML element relative to where it normally appears. If we had a header that appears at the top of our page, we could use relative positioning to move it a bit to the right and down a couple of pixels. Below is an example.

CSS Code:

h3 { 
  position: relative; 
 top: 15px;
 left: 150px;
}
p { 
  position: relative; 
 left: -10px;
}

You probably noticed that you define the four possible directions (left, right, up, and down) using only two (left and top). Here's a quick reference when moving HTML elements in CSS.

• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

Display:

Before CSS After Positioning

Position Absolute

With absolute positioning, you define the exact pixel value where the specified HTML element will appear. The point of origin is the top-left of the browser's viewable area, so be sure you are measuring from that point.
Note: Firefox does not currently interpret absolute positioning correctly. However both IE 6.0+ and Opera 8.0+ do.

CSS Code:

h3 { 
 position: absolute; 
 top: 50px;
 left: 45px;
}
p{ 
 position: absolute; 
 top: 75px;
 left: 75px;
}

Display:

Before CSS
After Positioning

Specifying a direction with absolute positioning is the same as relative positioning.