Positioning in Internet Explorer 4.0x

First, note that the positioning methods for Netscape and Internet Explorer described in these 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 IE 4.0(x) requires the use of relative and absolute positioning, margins, and layers.

As for Netscape 4.0, 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), but since it will be positioned, you will probably want to create a special class for the purpose:

	.shadow3
	{		
		font: Bold x-large 'sans-serif';
		color: #339999;
		position: absolute;
		left: 50pt;
		top: 35pt;
		z-index: 3;
		}
	

Note the positioning here using the left and top properties; the values are best determined by trial and error. Also note the Z-index property. Like the layers in Netscape, the elements with higher values of Z-index are displayed over elements with lower values (the default value is 1.

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; this specifies the foreground element style. The id=layer3 attribute is for Netscape, and IE will ignore it if no #layer3 appears in the IE style sheet.