Here's what I've been promising all along regarding the best way to overlap elements on a Web page. It's not a negative margin or small line-height. It's a combination of position and ...
z-index
When you position multiple elements and they overlap, use z-index to specify which one should appear on top.
H2 { position: relative; left: 10px; top: 0px; z-index: 10 }
H1 { position: relative; left: 33px; top: -45px; z-index: 1 }
Watch these CSS rules play out (I've colored the <H2> text green so you can see the difference):Stylesheets
Mania
If your browser doesn't support this CSS property, click here to see what it looks like.
Since the <H2> text has the higher z-index value, it appears on top of the <H1> text.
(Note: IE 4 and 5 are sometimes buggy with z-index.)
Use plain integers for the values. The z-index property works for elements that are positioned absolutely or relatively.
And of course you can also give images a z-index. (With Communicator, it's best to wrap the <IMG> tag in a <SPAN> or <DIV> tag, and then apply the property to the <SPAN> or <DIV>.) Check it out.
Congratulations! You've now made it through all the individual stylesheet properties. But you can't truly master stylesheets until you read the next page.
next page»
