HTML and CSS Reference
In-Depth Information
Take note of the
<div>
with a class of
.promo-desc
that wraps our
<h1>
element and
the link below it. We're going to add some absolute positioning to the
.promo-desc
ele-
ment to place it over the promo image. Here's the CSS:
.promo {
position: relative;
}
.promo-desc {
position: absolute;
bottom: 93px;
right: 75px;
}
You'll remember this technique from earlier in the chapter. The
.promo
element creates a
positioning context when we add relative positioning to it. With that in place, any absolutely
positioned elements inside of it will be positioned relative to it (that is, to the
.promo
ele-
ment). But hold on a second!
Figure 2.11
shows what happens when we add these styles.
Figure 2.11. The logo is partially hidden after adding relative positioning to the promo section
Notice in
Figure 2.11
that our text and link are placed roughly where we want them, but that
the bottom of our logo, which we carefully positioned earlier in this chapter, is now over-
lapped by the big promo image. We won't get into all the gory technical details on what's
causing this, but, to put it briefly, it's happening because of the relative positioning we've ad-
