Médiaforma

All posts tagged fixe

La propriété CSS position permet de définir la position d’un élément. Dans cette rubrique, nous allons mettre en évidence les similitudes et les différences entre deux des valeurs qui peuvent être affectées à cette propriété : absolute et fixed.

Le document avec lequel nous allons travailler est très simple. Il contient quelques paragraphes de texte et un bloc <div> de classe rouge.

La classe rouge est définie en CSS. La position de cette balise est absolue, à 20 pixels du bord supérieur et 100 pixels du bord gauche. Les dimensions du bloc sont fixées à 200 pixels sur 200 et la couleur d’arrière-plan est rouge.

Voyons le rendu de ce document dans Internet Explorer avec la commande Exécution / Launch in IE. La balise <div> et son contenu s’affichent au-dessus des paragraphes de texte.  Redimensionnons la fenêtre du navigateur pour que le texte ne puisse pas être affiché sur un seul écran. Si nous déplaçons la barre de défilement verticale, la balise <div> se déplace avec la page.

Retournons au code. Nous allons remplacer la valeur absolute par la valeur fixed.

.rouge {
position: fixed;
top: 20px;
left: 100px;
width: 200px;
height: 200px;
background-color: red;
}

Après avoir enregistré le document, nous l’affichons dans Internet Explorer. Apparemment, la modification de la propriété position n’a aucun effet. N’en soyez pas si sûr : si nous déplaçons la barre de défilement verticale, la balise <div> reste à sa position initiale, alors que les paragraphes de texte sont déplacés vers le haut.