Team-Masters.com
Que du Gratuit pour Webmasters
Le recouvrement de blocs
Lorsqu’il y a plusieurs blocs dans une page, ils peuvent se recouvrir partiellement ou totalement. L’ordre d’empilement dépend de l’ordre dans lequel figurent les instructions HTML dans le document HTML concerné.
On peut avoir l’exemple suivant :
Voici le code HTML :
<div id="bloc1">BLOC 1</div>
<div id="bloc2">BLOC 2</div>
<div id="bloc3">BLOC 3</div>Le code CSS correspondant :
div {
font-size: 20pt;
font-weight: bold;
text-align: center;
border: thin solid black;
}
#bloc1 {
background-color: red;
position: absolute;
width: 110px;
height: 240px;
top: 0;
left: 0;
}
#bloc2 {
background-color: aqua;
position: absolute;
width: 150px;
height: 200px;
top: 80px;
left: 140px;
}
#bloc3 {
background-color: yellow;
position: absolute;
width: 300px;
height: 30px;
top: 150px;
left: 75px;
}Si on inverse dans le code HTML les blocs 2 et 3, on a le résultat suivant :
Contrôler l’empilement des blocs avec la propriété z-index
Elle permet de définir l’ordre d’empilement des blocs. La valeur du z-index est un entier qui peut être positif, négatif ou nul. Plus la valeur est faible, plus le bloc concerné sera couvert par les autres dont la valeur du z-index est plus élevée. Par défaut, la valeur du z-index d’un bloc est égale à 1.
_ Dans l’exemple précédent, si on veut faire passer le bloc 3 sous les deux autres, dans son style CSS on va lui attribuer une valeur inférieure à celles des deux autres (par défaut égale à 1), comme par exemple -1. On a :
#bloc3 {
background-color: yellow;
z-index: -1;
position: absolute;
width: 300px;
height: 30px;
top: 150px;
left: 75px;
}Blocs transparents et visibilité
Si on ne spécifie aucune couleur pour les blocs dans la propriété background-color, ou qu’on choisisse transparent comme valeur, les blocs sont transparents et on peut voir à travers. Par exemple, si on enlève le background-color des blocs 2 et 3, on a le résultat suivant :
Mais les styles permettent d’aller encore plus loin et on peut même rendre des blocs invisibles. Cet effet s’obtient en utilisant la propriété visibility, à laquelle on attribue la valeur hidden. On peut donc, à l’aide de cette propriété rendre des blocs visibles (valeur=visible) puis invisibles (valeur=hidden). MMMh, vous voyez ce que vous pouvez faire, un menu avec des enchaînements de boîtes qui se déroulent par exemple au passage d’un lien ; ou un système d’info-bulle.
Dans notre exemple de départ, en modifiant les propriétés du bloc 2, on peut le rendre invisible, et pourtant il est là :
#bloc2 {
background-color: aqua;
visibility: hidden;
position: absolute;
width: 150px;
height: 200px;
top: 80px;
left: 140px;
}18 février 2005
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
Les pseudo-classes
