Head First HTML with CSS

playing with relative positioning
The test drive
After reloading the Starbuzz page, you should see the
coffee bag over to the right part of the sidebar. What
is interesting is that part of the image is actually
extending beyond the sidebar into the margin and off
the edge of the page. How does that work? Well, as
you’ve seen, the browser first flows a relative element
onto the page, and only then does it offset where it
is displayed. So the element still takes up the same
spot on the page, it’s just drawn in a different location.
Relative is a little like static positioning, but with a
dash of absolute thrown in. But, unlike absolute,
relative positioning is specified just as an offset from
the element’s real location, not in absolute coordinates
from the nearest containing block.
So, does this improve the page? We’re not sure, but
it was fun. (You might want to remove the relative
positioning before you show it to the CEO.)
540 Chapter 12
Couldn’t we have done this
with padding or margins
somehow?
Not really.
No matter how you tweaked the padding
and margins you still can’t get an image
to be positioned outside of the box it’s
in. And why try to do it the hard way?
We achieved a better effect with two lines
of CSS. You can use relative positioning
to display an element well beyond the
element’s box in the flow, which you just
can’t do with padding or margins.