Positioning in Netscape 4.0x
Creating overlays in Netscape 4.0(x) requires the use of relative and absolute positioning, margins, and layers.
The background portion of the overlay should be in an element (or class) that is positioned relative (to the flow of the page contents):
font: 80pt 'Wingdings', 'fantasy';
The foreground portion of the overlay should be in an element (or class) that is positioned absolutely (within the background element), though the positioning can be set in the layer element instead (see below):
font: Bold x-large 'sans-serif';
You will also need to create some special layer specifications in the style sheet. The layers are very important, and overlays in Netscape will not work without them. Here are the layer specifications for the overlay sample on the previous page:
Note that the higher numbered layers appear over lower-numbered layers. Elements will appear in the lowest-numbered layer by default. My second layer here could have been layer2, but I already had a layer2 in the style sheet for a different purpose. Notice the positioning of the background and foreground layers. Also note that the position of the foreground element is set using the top and left properties; the values are most easily determined by trial and error. You can also set positioning for the element itself, using the margin-top and margin-left properties, but I have found the results to be less consistent. If you do set those margin positions in the element, they will be applied in addition to the top and left values set in the layer.
The contents that are to be overlayed on the background should be placed within the background element, using the <span> tag:
<span class=shadow3 id=layer3>
Note the class attribute, and also the id attribute; these specify the foreground element style and the layer.
|Additional notes: the layer technique for overlays is a Netscape invention, and does not appear in the CSS1 specifications; I believe that the World Wide Web Consortium has expressed official disapproval of the layer method, and recommends the use of the Z-index property instead (we will look at this method in the following page on IE 4.0). I have seen no indication that Netscape plans to change their approach to positioning, but stay tuned....