Layout Techniques - Jump Start CSS - page 55

ded to the elements. But never fear! We can fix this with a few additions to our .logo and
.promo rule sets:
.logo {
float: left;
margin-left: 145px;
margin-top: -34px;
position: relative;
top: 34px;
z-index: 10;
}
.promo {
position: relative;
z-index: 5;
}
Here we've added the z-index property to help adjust the stacking of these elements. The
z-index property accepts an integer value and will only work on elements that are expli-
citly positioned using the position property. z-index adjusts the position of elements in
relation to one another along the z axis. This means instead of moving elements from left to
right or top to bottom, we're moving them forwards or backwards.
And so, if you're looking directly at a browser window, a higher z-index value means the
element will be (in a manner of speaking,) closer to you; whereas a lower z-index value
will push the element further away from you.
But, as mentioned, this will only happen in relation to other positioned elements, and will
not work for non-positioned elements. This is an important point to keep in mind when using
z-index , as this will often trip up CSS beginners.
So in our example, we've set the z-index property to “10” on the .logo element and “5”
on the . promo element, which fixes the problem, as shown in Figure 2.12 .