Simple example of using CSS layers (div) to overlap transparent gifs. Each gif is in its own layer, postitioned on the page in the same spot. The layers have a Z index that tells the browser which layer is on top of any other layer. Check the HTML following and you will see how the layers are positioned and the Z index setting. It doesn't matter where on the page you place the HTML, the browser puts the layer on the page where the co-ordinates are. This works in Netscape 4 and IE4 up. |
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 250; top: 234px; visibility: visible"><img src="images/layer2text.gif" width="150" height="156"></div>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2; left: 250px; top: 234px; visibility: visible"><img src="images/layer1text.gif" width="150" height="156"></div>
|