Chapitre 135 | Position Fixed

La position Fixed

Pour ce chapitre veuillez utiliser CodePen. Cliquez sur EDIT ON CODEPEN. Visionnez le résultat et continuez la lecture.

Points à retenir sur fixed

1. Fixation au viewport :
   • L’élément reste à sa place dans la fenêtre du navigateur, quelle que soit la position de défilement.
   • Utilisé pour des éléments comme des barres de navigation, des boutons ou des bannières.
2. Impact sur le flux de la page :
   • L’élément en fixed est retiré du flux normal. Cela signifie que le contenu suivant n’en tient pas compte, d’où l’importance d’ajouter des marges ou des espacements (margin-top dans cet exemple).
3. Couche supérieure (z-index) :
   • Assurez-vous que l’élément fixed apparaît au-dessus des autres en utilisant une valeur de z-index appropriée.

/* Barre d'entête fixe */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    z-index: 100;
}

Exercice:
Passez la position à fixed-header à « unset » (comportement par défaut ou hérité) et observez le résultat. La Barre d’entête n’est plus fixe, elle n’est plus épinglée en haut.

Sur une page HTML vierge, tous les éléments sont positionnés par défaut en static.

Si vous définissez position: unset sur un élément, alors certaines propriétés comme top, left, z-index deviennent inutiles, car elles n’ont aucun effet sur un élément positionné en static (la valeur par défaut de position).

Pourquoi ?

Lorsque vous utilisez position: unset, cela rétablit la valeur par défaut de la propriété position, qui est static si aucune valeur héritée n’existe. Or :

• Les propriétés comme top, left, z-index, bottom, ou right ne fonctionnent que avec des valeurs de position telles que relative, absolute, fixed, ou sticky.
• En static, ces propriétés sont ignorées.

Exercices

Passez la barre en FIXE et positionné en bas

Passez la barre latérale à droite.