Ex 1 --- Ex 2 --- Ex 3 --- Ex 4 --- Ex 5
exemple (5) : calques avec deux éléments empilés
Code placé dans HEAD ou fichier externe
<style type="text/css">
.dessus
{
position: absolute ; top: 760px ; left: 115px ; z-index: 2 ; border: solid 20px aqua ; background-color: aqua ;
}
.dessous
{
position: absolute ; top: 700px ; left: 56px ; z-index: 1 ; border: solid 20px yellow ;background-color: yellow ;
}
</style>
boîte de base, dessous
Boîte de dessus, (devant)
Ci-dessus, positionnement par appel de classes placées dans HEAD de cette page et indiquées dans le cadre bleu plus haut : <h1 class="dessous"> et <h1 class="dessus">
Ci-dessous codification en ligne, avec appel de style : <div class="cadre1" left: 150px ; z-index:1 ; style="width:250px ; height:150px ; background-color: #ffff00 ; background-color: #99ffff ; border: 2px none #000000 ; ">
Quelques explications supplémentaires : Rien de nouveau à ajouter pour l'appel d'une classe dans le premier exemple. Par contre en faisant appel en ligne, pour définir le positionnement, il est possible dans le deuxième exemple de déplacer les éléments codifiés, vu que n'interviennent pas les dimensions en "top" et que le flux des données redevient prioritaire. Cependant chaque cas est à juger en fonction du montage de vos pages.
