Layout Techniques - Jump Start CSS - page 42

If there are no other positioning-related styles on our page, the .example element shown
above would be positioned 100px from the top and 100px from the left of the browser win-
dow (also called the viewport ).
But this isn't very practical. It's not often that you'll want to position an element relative to
the browser window like this. The real practical value of absolute positioning comes from
combining it with a positioned parent element. Let's improve on the code we just wrote and
demonstrate what's meant by “positioned parent”:
.wrapper {
position: relative;
}
.example {
position: absolute;
top: 100px;
left: 150px;
}
Now, instead of positioning the element relative to the full browser window, we're forcing
positioning to occur relative to the .wrapper element. The relative positioning set on
.wrapper creates a positioning context for any positioned child elements.
Now let's combine this technique with the pseudo-elements we introduced in Chapter 1 , so
we can position our Twitter icon next to each tweet in our sidebar. Here is the HTML for a
single “Yummy Tweet”:
<div class="tweet">
<p><a href="#">@Peter</a> : Once again, the recipe of
the Aussie
↵ BBQ was a complete success thx <a
href="#">@RecipeFinder</a><br>
<a href="#" class="date">24 minutes ago</a></p>
</div>
We're going to target the outer <div> element that has a class of tweet using the following
CSS: