Absolute vs Relative Positioning

The terms Absolute and Relative positioning can be a little confusing.

Relative refers to placing an object relative to the normal flow of a document.

For example,
This line has this part set 5px lower

The code looks like this

This line has <span style='position:relative;top:5px;'>this part </span> set 5px lower

Absolute positioning locates a object relative to the object it is contained in.

With absolute positioning setting an object within the html body sets it in relation to the browser window.

However setting it inside another positioned tag such as a <div> will set it relative to the position of that tag.


Exercises
1. Create a page with a div located 100 pixels in from the upperleft hand corner of the screen.
Now add a span within the div and use absolute positioning so it located 10 pixels from the top and left of the upperleft hand corner of the div.

2. Use relative positioning to create the following.

S L O P E