If you try stretching the browser wider or longer, the photo moves to main-
tain its one-third from the left, one-fifth from the top position within its
container div.
Finally, in the body of the document, you display your elements:
<div class=”sidebar”> HERE is a sidebar. You can fill it with
links, text, whatever... </div>
<div class=”maintext”>
<IMG class=”relative” height=”100” width=”175”
src=”town.jpg”>
Notice that the image specifies the size that you want the photo to be in
absolute terms (pixels are the default unit of measurement, used if you don’t
specify any other unit). If you don’t specify height and width, the image
appears at its true size.
Stacking Elements on Top of Each Other with the Z-Axis ........................
Clearly, there’s more to positioning than mere horizontal (left) or vertical (top)
coordinates. Indeed, there’s a third axis, known as the z-axis. It’s what happens
when something in a browser overlaps another object, or is “on top of it” in the
sense that laying a book on a table puts that book on top of the table.
In CSS, you specify which object is on top of another by using the z-index
property. A higher z-index value causes an object to appear on top. For exam-
ple, recall the experiment earlier in this chapter when you had the maintext
class at 110 pixels left, but expanded the size of the sidebarclass to 130
pixels? The maintextcovered up part of the sidebar. You can change this
by adjusting the sidebar’s z-index to 99 or some number that you know is
higher than the maintext. This will move the sidebar divon top of the
maintext div.
div.sidebar {position: absolute; z-index: 99; background-
color: cornflowerblue; top: 0; left: 0;width:
130px; height: 65%; padding-left: 6px; padding-
right: 4px; padding-top: 6px; font-size: 16pt;}
(Note that I also reduced the height of the sidebar from 75 percent to 65 per-
cent so that the overlapping would show up better in Figure 4-8.)
When you add a high z-index value, the sidebar moves on top of the main
text div, as shown in Figure 4-8:
Chapter 4: Taking a Position 81
