Mise en page CSS – La propriété position
Le position La propriété spécifie le type de méthode de positionnement utilisé pour un élément (statique, relatif, fixe, absolu ou collant).
La position Propriété
Le position La propriété spécifie le type de méthode de positionnement utilisé pour un élément.
Il existe cinq valeurs de position différentes :
staticrelativefixedabsolutesticky
Les éléments sont ensuite positionnés à l’aide des propriétés top, bottom, left et right. Cependant, ces propriétés ne fonctionneront que si les position
propriété est définie en premier. Ils fonctionnent également différemment selon la valeur de la position.
position : statique ;
Les éléments HTML sont positionnés statiques par défaut.
Les éléments positionnés statiquement ne sont pas affectés par les propriétés top, bottom, left et right.
Un élément avec position: static; n’est pas positionné de manière particulière ; il est toujours positionné selon le flux normal de la page :
Cet élément
Voici le CSS utilisé :
Exemple
div.statique {
position : statique ;
bordure : solide 3px #73AD21 ;
}
Essayez-le vous-même »
position : relative ;
Un élément avec position: relative; est positionné par rapport à sa position normale.
Définir les propriétés haut, droite, bas et gauche d’un élément relativement positionné entraînera son ajustement par rapport à sa position normale. Les autres contenus ne seront pas ajustés pour s’adapter à tout espace laissé par l’élément.
Cet élément
Voici le CSS utilisé :
Exemple
div. relative {
position : relative ;
gauche : 30px ;
bordure : solide 3px #73AD21 ;
}
Essayez-le vous-même »
position : fixe ;
Un élément avec position: fixed; est positionné par rapport à la fenêtre d’affichage, ce qui signifie qu’il reste toujours au même endroit même si la page défile. Les propriétés top, right, bottom et left sont utilisées pour positionner l’élément.
Un élément fixe ne laisse pas de vide dans la page où il aurait normalement été situé.
Remarquez l’élément fixe dans le coin inférieur droit de la page. Voici le CSS utilisé :
Exemple
div. fixe {
position : fixe ;
bas : 0 ;
droite : 0 ;
largeur : 300 pixels ;
bordure : solide 3px #73AD21 ;
}
Essayez-le vous-même »
Cet élément
position: fixed;
position : absolue ;
Un élément avec position: absolute; est positionné par rapport à l’ancêtre positionné le plus proche (au lieu d’être positionné par rapport à la fenêtre d’affichage, comme fixe).
Cependant; si un élément en position absolue n’a pas d’ancêtres positionnés, il utilise le corps du document et se déplace avec le défilement de la page.
Note: Les éléments positionnés en absolu sont supprimés du flux normal et peuvent chevaucher des éléments.
Voici un exemple simple :
Cet élément a la position : relative ;
Cet élément
Voici le CSS utilisé :
Exemple
div. relative {
position : relative ;
largeur : 400 pixels ;
hauteur : 200px ;
bordure : solide 3px #73AD21 ;
}
div.absolu {
position : absolue ;
haut : 80px ;
droite : 0 ;
largeur : 200 pixels ;
hauteur : 100px ;
bordure : solide 3px #73AD21 ;
}
Essayez-le vous-même »
position : collante ;
Un élément avec position: sticky; est positionné en fonction de la position de défilement de l’utilisateur.
Un élément collant bascule entre relative et fixed, selon la position de défilement. Il est positionné de manière relative jusqu’à ce qu’une position de décalage donnée soit rencontrée dans la fenêtre – puis il “colle” en place (comme position:fixed).
Note: Internet Explorer ne prend pas en charge le positionnement permanent. Safari nécessite un préfixe -webkit- (voir exemple ci-dessous). Vous devez également spécifier au moins un des top, right, bottom ou left pour un positionnement collant au travail.
Dans cet exemple, l’élément collant se colle en haut de la page (top: 0), lorsque vous atteignez sa position de défilement.
Exemple
div.sticky {
position : -webkit-sticky ; /* Safari */
position : collante ;
haut : 0 ;
couleur de fond : vert ;
bordure : 2px solide #4CAF50 ;
}
Essayez-le vous-même »
Positionnement du texte dans une image
Comment positionner du texte sur une image :
Plus d’exemples
Définir la forme d’un élément
Cet exemple montre comment définir la forme d’un élément. L’élément est découpé dans cette forme et affiché.
Toutes les propriétés de positionnement CSS
| Propriété | Description |
|---|---|
| bas | Définit le bord de la marge inférieure pour une boîte positionnée |
| agrafe | Clipse un élément absolument positionné |
| gauche | Définit le bord de la marge gauche pour une boîte positionnée |
| position | Spécifie le type de positionnement d’un élément |
| droite | Définit le bord droit de la marge pour une boîte positionnée |
| haut | Définit le bord supérieur de la marge pour une boîte positionnée |
#Mise #page #CSS #propriété #position