Positioning in Netscape 4.0x

First, note that the positioning methods for Netscape and Internet Explorer described in this and the following pages are not the only ways to create overlays. However, using the methods described here will allow you to write one page that will work for all three browsers, provided that you use a JavaScript to load a appropriate style sheet for each browser and to write the foreground layers (these scripts will be presented following the explanation of positioning).

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):

	.hugeding
	{		
		font: 80pt 'Wingdings', 'fantasy';
		color: #FFFF99;
		position: relative;
		}
	

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):

	.shadow3
	{		
		font: Bold x-large 'sans-serif';
		color: #339999;
		position: absolute;
		}
	

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:

	#layer1
	{		
		position: relative;
		}

	#layer3
	{		
		position: absolute;
		left: 40pt;
		top: 30pt;
		}

	

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:

	<p class=hugeding>
	0<br>
	<span class=shadow3 id=layer3>
	Files
	</span>
	</p>
	

Note the class attribute, and also the id attribute; these specify the foreground element style and the layer.