Après la théorie, passons au code…
Le mark up html est simplissime :
<div id=”frame” >
<div class=”moving turtle” style=”z-index:16;”> </div>
<div class=”moving oldgohan” style=”z-index:4;”> </div>
<div class=”moving krilin” style=”z-index:19;”> </div>
<div class=”moving goku” style=”z-index:24;”> </div>
…
<div class=”moving cloud1 cloud1d” style=”z-index:3;”> </div>
</div>
Il est composé d’un élément div, pour chaque personnage, l’image étant définie comme background de l’élément. Ces éléments div sont positionnés en position absolue et l’ordre de superposition est défini par z-index. Le positionnement au sein de la bannière se fait par les attributs top et left au sein de la css : (more…)