Flottement et superposition

Flottement et superposition

Le positionnement nous offre encore d'autres possibilités afin d'organiser notre page. Après avoir vu le positionnement absolu, fixe et relatif dans le tutoriel précédent, voyons maintenant le positionnement flottant.

Les flottants

Maintenant nous allons apprendre comment faire flotter des objets. Vous avez par exemple une page pour présenter des personnes et vous voulez mettre leur photo d'identité. Sans faire flotter l'image vous auriez quelque chose comme ceci :

Il y a donc un espace blanc à côté de la photo. Si vous voulez mettre du texte dans cet espace blanc pour entourer la photo comme dans les journaux, il vous faut mettre la propriété float. Dans ce cas on dit que l'image 'flotte' (propriété : float) .

Code CSS :

.imageflottante
{


float: right;


}

Puis qu'on parle de journaux, ça nous fait penser aux lettrines. Pour ceux qui ne savent pas encore ce qu'est une lettrine, c'est la première lettre d'un paragraphe écrite en plus grande taille. Ceux qui parmi vous ont suivi les cours sur les pseudo-classes savent très bien qu'il nous faut utiliser p:first-letter. En voilà bien une révision et application à la fois !

Code CSS :

p:first-letter {


float: left;
font-size: 3em;
font-weight: bold;
margin-right: 5px;
}

Effet de superposition Z index

Toujours sur les manipulations du positionnement, on veut maintenant avoir des effets de superposition pour des blocs qui se chevauchent. Pour vous donner une petite idée, c'est à peu près comme les histoires de calques sur logiciels de traitement d'images. Il faut surtout apprendre à gérer les superpositions, et les écrasements qui en résultent.

Pour cela, nous devons utiliser la propriété z-index. Elle va donner un numéro à chacun des éléments. Chaque élément se retrouvera écrasé par les éléments numéros suivants.

Code CSS :

.numero1 {
background-color:red;
position:absolute;
top:25px;
left:25px;
width:50px;
height:50px;
z-index:1;
}



numero2 {


background-color:green;
position:absolute;
top:50px;
left:50px;
width:50px;
height:50px;
z-index:2;
}



numero3 {
background-color:yellow;
position:absolute;
top:75px;
left:75px;
width:50px;
height:50px;
z-index:3;


}

Code XHTML :

<div id="numero1"></div>
<div id="numero2"></div>
<div id="numero3"></div>

Le numéro 1 (z-index=1) qui est en rouge est écrasé par le numéro 2 (z-index=2), en vert, le numéro 2 par le 3 (z-index=3) et ainsi de suite.