All About Viburnums with Moar position property
What's on this page
The position property is best used like pungent spices in cooking: in small, controlled amounts. It plays havoc with the normal flow, causes overlapping, and creates layouts that break easily, so use it when it is the only way to present your page the way you want.
One common use for position: absolute aside from things like CSS Image Maps is when you want to relocate something like your banner or your main menu in a location other than the top of the page. The top of the page is where it must be in the markup, but you can easily position it where you'd like. Our other examples showed how position: fixed was used to make a sticky banner ("stuck" to top of viewport) or a sticky menu ("stuck" to bottom of viewport) as a footer.
But what if you just want to move your menu above your site id? Don't mark it up there, position it! That is what we'll do here: move the menu above the site id in the banner. While usually you need to reset the context box for position: absolute, in this particular design you do not because the body is okay as the context box. However, if you had a banner that didn't "touch" the top of the viewport, you'd need to reset the context box to be the banner.
What about position: relative?
Mostly we'll use position: relative to reset the context box for absolutely positioned elements, although we did not need to in this design to move the menu, because having its top positioned in relation to the body worked okay for us.
In our other exercises with absolutely positioned elements, we "made room" for them in the layout (where they overlapped content in their new location) using padding or margin. But sometimes padding and margin aren't the best choice. Below are some "shortcut" links like you might have on a homepage, with text in the vertical center of the box. It can be tricky to get text there, and relative positioning is one easy way to do it. Padding and margin don't work as well because of a few things: padding will make a box taller so you have to do all kinds of box model math to get it the correct size again, and margin sometimes calculates from the bottoms of other elements in the layout rather than from the top of the parent. So... use position: relative.
I was too lazy to make a hover graphic that dimmed the brightness of the images, so I just put a translucent background color in the span. But you could make better hover graphics to style this the most appropriate way for your site.