Now, those intrepid Webmonkeys who viewed source on the last page may have noticed that for
the actual examples on this page, I'm using position: relative. There are subtle but real differences between
relative and absolute positioning.
When you position an element absolutely, you take it out of the flow of your HTML document and position it relative to the corner of your page.
Objects can overlap and lay on top of one another, and they take up no space
in the flow of the HTML.
Relative positioning doesn't mean that an element is
positioned with a percentage value or that it's based on the position of another
element - rather, it takes
up the same space it would have if it were not positioned, and its starting
point is determined by what HTML came before it; it's just been "nudged"
a bit. Take a look at this example:
[On this page you are seeing GIFs instead of actual dynamic HTML because you're using a pre-4.0 browser or Netscape 4; Netscape 4 would display this dHMTL if it weren't inside tables.]
In both sentences, the word Webmonkey has been positioned 200 pixels to the left.
The first sentence has the positioning selector set to absolute, the second
has it set to relative. Notice how the relative one leaves a space the size of the
word Webmonkey open while the absolute one collapses
the space. If I were to give these two Webmonkey pieces a "top" value
as well, the first absolute one would be floating at the top of
the article, while the relative positioned one would be floating just under
the sentence it's part of, like so:
So now that we know all about the basics of positioning, let's do a quick assignment.
Let's construct the dramatis personae page using CSS-P. Here is a screenshot
of the page. Build it, and then let's move on to more complex layouts. (Hint:
Set the screenshot as a background GIF to help with the positioning. Also the
fonts are 10 pixels Comic Sans MS.)
So construct the page, and then let's move on to a more complex layout.
