Overlapping Layers - Page 4
May 31, 2001
If you've read many CSS tutorials, you know that overlapping
layers can create all sorts of wild and crazy stuff. But they
also come in handy for some conservative but attractive effects,
and for solving a couple of age-old HTML dilemmas. The z-index
property defines the vertical stacking order of elements. For
example, an element that has {z-index:2} will appear on top of
an element that has {z-index:1} if their positions on the page
overlap.
The old floating head trick, eh?
A heading, or a graphic, that overlaps two columns is a common
sight in the print world, but rare on the Web, because it's a
trick that's incredibly hard to pull off using tables. With CSS
— you guessed it, it's a piece of cake! Simply create a
class for the heading that specifies the desired position, and
give it a higher z-index than the classes that you want it to
overlap, as in the example above.
Graphic text or HTML text?
Many a sleepless night have I spent considering whether to use a
graphic image or plain HTML text for a banner, button or
heading. HTML text is easier to change later, and it's
friendlier to search engines and non-conventional browsers. But
it's awfully nice to incorporate a photo or other image into
your logo. Wouldn't it be great if you could combine the two?
Thanks to CSS, you can. Simply put your graphic and your text in
two different divisions, with the same (or overlapping) x and y
coordinates, but different z-indices, as in the example below.
Flags for every occasion
Okay, Now You May Use Background Images.
Of course, the overlapping text 'n image trick can be done with
any size image, including a background image for a whole page.
Readers of my previous articles know that I have always scorned
background images, at least single-image, non-tiling ones. If
you use the BODY tag to define a background image, it will often
tile whether you want it to or not. In other words, if the
user's browser window is wider or taller than the image, then
the beginning of a second copy of the image will appear at one
or more edges. This looks so abysmally amateurish that I always
considered it a good reason not to use background images at all.
Thanks to CSS, this particular problem is history (although
there are other reasons not to use backgrounds —
harrumph!). You can place a background image exactly where you
want it, covering a whole page or any part of a page. Simply
place it in a division with the desired coordinates, and put the
foreground elements in an overlapping division with a higher z-
index.
Further Exploration
If you learn the language carefully, and use your imagination,
you can do some amazing things with CSS. We've thrown out the
tables — maybe frames are next! Here are some of the best
CSS resource sites, each also a springboard to dozens more
sites.
How to Do It - Page 3
Toss out your Tables! CSS is the scene!
|
