Head First HTML with CSS

Getting relative
This is it, the last type of positioning: relative positioning. Truth
be told, it’s also the loneliest of the positions because you
just won’t find a lot of people using it in their designs. But,
new designs come along every day, so when you see relative
positioning, you’ll want to know how it works and what it does.
Unlike absolute and fixed positioning, an element that is
relatively positioned is still part of the flow of the page, but
at the last moment, just before the element is displayed, the
browser offsets its position. Let’s see how this works on the
coffee bag in the Starbuzz Page. We’re going to take the coffee
bag and offset it to the side, so those coffee beans that spilled
out of the bag look like they’re spilling out of the page, too.
Now we could absolutely position the coffee bag, but if we did,
we’d have to find a way for the space it’s taking up on the page
to get reserved, since absolute positioning takes the document
completely out of the flow.
That’s where relative positioning comes in. We can keep the
element in the flow, have its space reserved, and then offset
where it actually gets displayed. Let’s try it.
Here’s a new rule that selects the
image. We’re using a descendant
selector here to select only images
inside the beanheading.
.beanheading img {
position: relative;
left: 120px;
}
Then we specify a position of relative,
and whatever offsets we want on the
image. The offset is from the position
where it is placed in the flow.
Add this rule to your CSS and then save and reload.
Notice that images are
inline elements, but that’s
okay. You can use any of
the positioning techniques,
or even a float, on inline
elements too.
So here we’re specifying that the
image should be displayed 120
pixels from the left of where it
sits in the flow of the document.
You can use right, top, and bottom
as well, when specifying offsets.
We want to take the Starbuzz
Coffee bag and move it about
100 pixels to the right.
layout and positioning
With absolute positioning, the
coffee bag moves, but since it is no
longer in the flow, the rest of the
page moves up underneath.
you are here 539