Part 10 - Positioning | CSS

CSS Position

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.

All CSS Positioning Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property	Description	Values	CSS
bottom	Sets the bottom margin edge for a positioned box	auto length % inherit	2
clip	Clips an absolutely positioned element	shape auto inherit	2
left	Sets the left margin edge for a positioned box	auto length % inherit	2
overflow	Specifies what happens if content overflows an element's box	auto hidden scroll visible inherit	2
position	Specifies the type of positioning for an element	absolute fixed relative static inherit	2
right	Sets the right margin edge for a positioned box	auto length % inherit	2
top	Sets the top margin edge for a positioned box	auto length % inherit	2
z-index	Sets the stack order of an element	number auto inherit	2