TIPS - CSS: Professional Techniques for Modern Layout - page 82

Technically speaking, however, you're placing the top-let corner of the element 10,000
ems—that is, ten thousand times the element's font size—above and 10,000 ems to the let of
the top-let corner of the element's containing block. In many cases, that's the root element, as
in the html element. On other cases, it might be another element within the document. Either
way, the odds are overwhelming that given the above styles, it will be far, far out of sight.

To bring it back, you have a couple of options. If you want it to be absolutely positioned when
it's visible, then you can just set its top and left to place it where you want it. h at would be
something like:

.show { top : 0 ; left : 0 ;}

If, on the other hand, you want it to come back into the normal l ow of the document, you can
just set its position to the CSS default.

.show { position : static ;}

If you take that approach, you don't have to reset the values of top and left , because values
for those properties are completely ignored when laying out a statically positioned element.
You could reset them, or not; it won't make a dif erence.

A third option comes into play if you want the element to come back into the normal l ow, but
you need it to be a containing block for the elements it contains. h is would be the case if you
want to absolutely position things that are inside the element you're bringing back on-screen.
In that case, you can have the element be relatively positioned, but you do have to declare the
of set values.

84

.show { position : relative ; top : 0 ; left : 0 ;}

If you leave out the top: 0; left: 0; part, then the element will be of set from its place
in the normal l ow. h at'll leave a hole in the page where it would've shown up, had it not
been thrown 10,000 ems up and to the let .

And of course you don't have to use exactly 10,000 ems here. You can use any number you like
up to 65535 in a few very old browsers, 16777271 in Safari 3, and 2147483647 in the rest. You
can also use any valid CSS measuring units, from ems to pixels to picas to inches. h e key is to
make it a very large number so that there's basically no chance of it ever being visible until you
call for it.

IMAGE REPLACEMENT
One of the longest-running design techniques in CSS is that of image replacement. h is is a
class of techniques that allow you to use an image in place of text in such a way that the text is
still available for print, accessibility, and so forth. Image replacement (IR) is generally
intended for small, limited applications, such as company logos, page headlines (see Figure
3-9), and so on. It is not suitable for replacing entire paragraphs of text.