Il suffit de recopier dans la source de la page, entre <body...> et </body>, le texte suivant pour image1 par un "copier coller" :
<div id="Layer1"
style="position:absolute; left:10px; top:14px;
width:961px; height:85px; z-index:1; background-color: #FFCC00;
layer-background-color: #FFCC00; border: 1px none #000000; visibility:visible">
<h1 align="left">Une présentation bien
cadrée !</h1>
<p align="right">Utilisation de l'élément DIV et des feuilles de styles
pour obtenir des superposition de surfaces</p>
</div>
<div id="Layer2"
style="position:absolute; left:25px; top:70px;
width:153px; height:492px; z-index:2; background-color: #00CC66;
layer-background-color: #00CC66; border: 1px none #000000; visibility:visible">
<p align="center"><strong>Utilisation
des cadres, mais qui ne sont pas des frames.</strong></p>
<p align="left"><em>On peut de plus empêcher la disposition
arbitraire du navigateur ! Et
sortir de l'écran.</em></p>
</div>
<div id="Layer3"
style="position:absolute; left:180px; top:127px;
width:791px; height:493px; z-index:3; visibility: visible">
<p> </p>
</div>
<div id="Layer4"
style="position:absolute; left:551px; top:289px;
width:317px; height:160px; z-index:5; background-color: #0066FF;
layer-background-color: #0066FF; border: 1px none #000000; visibility:visible">
<p align="center"> </p>
<h2 align="center">Quand les cadres se superposent...</h2>
</div>
<div id="Layer5"
style="position:absolute; left:443px; top:138px;
width:200px; height:200px; z-index:4; visibility: visible">
<dd><p align="center"><img
src="promosit.gif" width="200" height="200"
align="left"></p>
</dd>
</div>
Chaque "layer#", se comporte
comme une couche.
L'ordre des superpositions se fait grâce à "z-index#.