CSS Primer (Part 4)

	.OurLogo { position:absolute; 
	           left:30px; 
	           top:10px;
	           width:40px; 
	           height:30px; 
	           color:red;
	           font-size:12pt; 
	           background: black;
	           border:1pt red dotted; }

So if you can nail down objects, what happens when you try and put two objects in one place on the screen? Objects simply stack up on top of one another quite gracefully. The default stacking order says that the first item laid down will land on the bottom of the pile, and the last will be on top. But you can change the stacking order by altering the "z-index" attribute as follows:

	<DIV CLASS="pile" ID="image1" STYLE="z-index: 3">
	<DIV CLASS="heap" ID="image2" STYLE="z-index: 2">

In this example, image1 is on the bottom and image2 is on the top. You can use any integer (positive or negative) for your z-index, but the highest number will always come out on the bottom and the lowest on top. Try letting a few objects overlap just slightly for some fascinating design effects.

Let your light shine through
Stacked objects can look great, if you plan properly, because your objects' native transparencies are respected. Letters can be seen through transparent .GIFs and vice versa. If that's not exactly what you had in mind, don't forget you also have control over the background properties for every rule. These backgrounds are all valid:

	H1       { background-color: #000080; }
	.OurLogo { background-color: transparent; }
	BODY     { background-image: url(/images/foo.gif); }

Magic static backgrounds
When a page scrolls, everything on that page scrolls with it, right? Not necessarily. With CSS, you simply tag the fixed argument to an object to make that object hold its position on the page, even as text and images scroll past or over it. Here's how:

	BODY { background : cyan url(dali.jpg) fixed }

NOTE: This feature is available in IE 4 and later only.

It's the "fixed" part that nails things down. This, of course, will work with anything that takes a background.

Don't break older browsers
CSS was designed to integrate seamlessly with existing HTML, so it won't break old browsers. Still, it's possible to create CSS pages that look terrible in older browsers. The trick to is to build your pages in straight HTML using a 3.0 or earlier browser. Then apply your styles to that document and fine-tune it. Older browsers will ignore new tags they don't understand, and the CSS syntax will override the existing HTML, as long as you apply your styles in the right order.

CSS Primer (Part 1) | CSS Primer (Part 2) | CSS Primer (Part 3) | CSS Primer (Part 4)