position
Choisit la façon de positionner un élément : dans le flux, en relatif, en absolu, en fixe ou en collant.
- Valeur initiale
static- Héritée
- Non
- Animable
- non
- S’applique à
- tous les éléments
- JavaScript
element.style.position = "absolute"
Exemple
#.card {
position: relative;
}
.card .badge {
position: absolute;
top: 12px;
right: 12px;
}<div class="card stage" style="height: 110px;">
<strong>Cours HTML et CSS</strong>
<p>11 modules, 700 exercices</p>
<span class="badge box">Nouveau</span>
</div>Définition et utilisation
#La propriété position décide comment la position de l’élément est calculée. Par défaut (static), l’élément reste là où il tombe dans le flux normal de la page, et les propriétés top, left et les autres ne font rien.
relative déplace l’élément par rapport à son emplacement habituel, qui reste réservé. absolute sort l’élément du flux et le positionne par rapport à l’ancêtre positionné le plus proche. fixed fixe l’élément à la fenêtre du navigateur, donc il ne défile pas avec la page.
sticky combine les deux comportements : l’élément s’écoule normalement jusqu’à ce que le défilement l’amène à un seuil défini par exemple par top: 0. Il se colle alors en place, mais seulement à l’intérieur de son parent.
Syntaxe
#position: static | relative | absolute | fixed | sticky;Valeurs
#- Flux normal. Les valeurs
topetleftde la démo sont ignorées. - L’élément se déplace de 30px vers le bas et vers la droite, et son emplacement d’origine reste vide.
- L’élément sort du flux (l’élément 3 prend sa place) et se positionne par rapport à l’ancêtre positionné.
- L’élément se fixe à la fenêtre. Ici, la fenêtre est le cadre d’aperçu.
- Faites défiler la liste dans l’aperçu : l’en-tête se colle au bord supérieur de son conteneur.
Valeurs en pratique
#static
top et left de la démo sont ignorées..demo { position: static; }relative
.demo { position: relative; }absolute
.area { position: relative; }
.demo { position: absolute; }fixed
.demo { position: fixed; }sticky
.demo { position: sticky; top: 0; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Un élément en
absolutese positionne par rapport à l’ancêtre le plus proche dont lepositionest différent destatic. On ajoute le plus souventposition: relativeau parent. stickyne fonctionne pas si un ancêtre aoverflow: hidden, ou si vous ne précisez pas de seuil, par exempletop: 0.
Entrées associées
#- topÉloigne un élément positionné du bord supérieur de son point de référence.
- insetUn raccourci qui définit top, right, bottom et left en une seule déclaration.
- z-indexDétermine quel élément se trouve au-dessus quand des éléments se chevauchent.
- displayDétermine comment un élément se comporte dans la mise en page de la page et comment il organise ses enfants.
- floatDéplace un élément vers le bord gauche ou droit, et le texte le contourne de l’autre côté.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.