La propriété CSS position permet de spécifier la méthode de positionnement d'un élément HTML dans la fenêtre du navigateur
Les valeurs possibles de cette propriété sont les suivantes :
Une fois son type de positionnement choisi, l'élément est placé à l'aide des propriétés top (haut), bottom (bas), left (gauche) et right (droit)
Il s'agit du type de positionnement par défaut des éléments HTML
C'est pourquoi on voit rarement la ligne position:static
Les éléments positionnés de manière statique ne sont pas affectés par les propriétés top, bottom, left et right
Un élément affecté de la propriété position:static est affiché de manière normale
Dans l'exemple suivant, la propriété de positionnement pourrait être enlevée sans rien changer à la sortie (essayez pour voir!)
<style>
div {
position: static; /* ligne inutile */
border: dashed DarkViolet 5px;
padding: 10px;
}
</style>
...
<div>
Je suis un DIV statique.
</div>
Un élément disposé avec la propriété position:relative est positionné relativement à sa position normale
Cette nouvelle position est exprimée à l'aide des propriétés top, bottom, left et right
Les autres éléments de la page ne sont pas repositionnés pour donner de l'espace à l'élément ou remplir l'espace que celui-ci laisse libre
<style>
div {
position: relative;
/* modifiez les deux lignes suivantes! */
top: 25px;
left: 50px;
border: solid DarkViolet 5px;
padding: 10px;
}
</style>
...
<div>
Je suis un DIV relatif.
</div>
Un élément disposé avec la propriété position:fixed est positionné relativement à la fenêtre du navigateur
Cela veut dire que l'élément conservera sa position dans l'écran, même si on fait défiler la page
La position par rapport aux bords de la fenêtre est exprimée à l'aide des propriétés top, bottom, left et right
<style>
div {
position: fixed;
/* modifiez les deux lignes suivantes! */
bottom: 50px;
right: 10px;
border: solid DarkViolet 5px;
background-color: yellow;
padding: 10px;
}
</style>
...
<div>
Je suis un DIV fixe.
</div>
Un élément avec la propriété position:absolute est disposé relativement à son ancêtre positionné le plus près
Un élément positionné est un élément positionné de n'importe quelle façon, sauf de manière statique (position:static ou aucune indication)
Si l'élément n'a pas d'ancêtre positionné, il utilise alors l'élément body
Dans l'exemple suivant, un div est positionné de manière absolue par rapport à un autre div (son ancêtre), lui-même postionné de manière relative
<style>
div.rel {
position: relative;
width: 400px;
height: 200px;
border: solid DarkViolet 5px;
}
div.abs {
position: absolute;
width: 200px;
height: 100px;
bottom: 10px; /* changez cette valeur */
right: 10px; /* changez cette valeur */
border: solid red 5px;
}
</style>
...
<div class="rel">Un DIV postionné de manière relative
<div class="abs">Un DIV postionné de manière absolue</div>
</div>
Un élément avec la propriété position:sticky est disposé relativement à la position courante du défilement de la page
Un élément "collant" alterne ainsi entre une position fixe et relative
Vous avez sûrement déjà vu ce type de positionnement utilisé pour des barres de navigation
<style>
div {
position: sticky;
top: 0px;
padding: 10px;
border: solid #00f 1px;
background-color: #ccf;
}
</style>
...
<p style="font-weight:bold">
Faites défiler cette page!
</p>
<p>
...
</p>
<div>
Je suis un DIV collant.
</div>
<p>
...
</p>
Nous avons vu qu'il est possible de postionner avec précision les éléments HTML et qu'il est même possible de les superposer
Dès lors, il devient nécessaire de gérer cette superposition d'éléments en indiquant quel élément sera caché par quel autre
Pour cette tâche existe la propriété z-index qui permet d'assigner à un élément sa position dans la "pile" d'affichage
Plus la valeur de z-index d'un élément HTML sera élevée par rapport aux autres, plus il sera à l'avant-plan
Les valeurs utilisées pour cette propriété sont des entiers, positifs ou négatifs
<style>
.rouge {
position: fixed;
z-index: 3; /* au dessus de tout */
background-color: red;
width: 200px;
height: 150px;
}
.vert {
position: fixed;
z-index: 2; /* au dessus du texte */
top: 60px;
left: 80px;
background-color: green;
width: 200px;
height: 150px;
}
.bleu {
position: fixed;
z-index: -1; /* en dessous de tout */
top: 120px;
left: 160px;
background-color: blue;
width: 200px;
height: 150px;
}
</style>
...
<div class="rouge"></div>
<div class="vert"></div>
<div class="bleu"></div>