position CSS propriété

Définition de la CSS position.

La propriété de Position CSS position permet de spécifier si un élément est positionné ou pas et spécifie par la même occasion son type de positionnement pour déterminer algorithme utilisé pour calculer sa position. Seul un élément positionné interprète les feuilles de styles de position left, top, right et bottom.

position : fixed;
position : absolute;
position : relative;
position : static;
position : sticky;

La propriété de feuille de style position CSS peut prendre la valeur de position :

• static : n'est pas considéré comme un élément positionné, left, top, right et bottom sont ignorés. Valeur par défaut.
• relative : l'élément est considéré comme positionné, le positionnement se fera par rapport à l'endroit où il est positionné dans le flux (où l'élément a été déclaré dans le code HTML), sauf pour certain éléments de tableau.
• absolute : l'élément est considéré comme positionné, le positionnement se fera par rapport au coin haut gauche de la page HTML ou par rapport au premier parent trouvé qui n'est pas static. Son comportement est de type block et sort du flux.
• fixed : l'élément est considéré comme positionné, reste fixe, ne bouge pas quand défile l'écran, le point d'origine est coin haut gauche de la zone de contenu de la fenêtre. Son comportement est de type block et sort du flux.
• sticky (CSS3) : c'est un mixte entre la position relative et fixe. L'élément est considéré en position relative jusqu'à ce que le défilement de la fenêtre soit telle que l'élément serait à moins de la valeur du seuil (top, left, right, bottom). Au-delà de ce seuil, l'élément serait fixé à la valeur du seuil qui est obligatoire. Son positionnement se fera par rapport au coin haut gauche de la page HTML ou par rapport au premier parent trouvé qui n'est pas static et à l'intérieur de cet élément.

Exemple de code position CSS

Conditions d'application de la CSS position.

La propriété CSS position est applicable sur toutes les balises HTML ou XHTML.

Héritage des valeurs Css de position.

Les balises filles HTML ou XHTML n'héritent pas de la propriété position CSS.

Problème d'interprétation de position en Css.

La propriété position CSS ne pose aucun problème d'interprétation, sauf pour "fixed" sous Internet Explorer qui n'est reconnue qu'à partir de la version 7+ et sauf pour "sticky" sur les balises HTML table et ses enfants (th, td, ...)