La propriété CSS position
Utilisez la propriété CSS position pour placer un élément sur la page. Découvrez les valeurs et des exemples.
La propriété CSS position contrôle la façon dont un élément est placé dans le document et la manière dont il réagit aux propriétés de décalage top, right, bottom et left. C'est l'une des propriétés les plus importantes pour construire des interfaces en couches, fixes ou flottantes.
Cette propriété accepte cinq valeurs principales :
static— valeur par défaut ; l'élément reste dans le flux normal du document.relative— l'élément conserve sa place dans le flux mais peut être décalé grâce aux propriétés de décalage.absolute— l'élément est sorti du flux et positionné par rapport à son ancêtre positionné le plus proche.fixed— l'élément est sorti du flux et positionné par rapport au viewport.sticky— l'élément alterne entrerelativeetfixedlors du défilement.
Cette page explique quand utiliser chaque valeur, les règles qui régissent les décalages et les blocs conteneurs, ainsi que les erreurs courantes à éviter.
Fonctionnement des décalages et des blocs conteneurs
Les propriétés de décalage top, right, bottom et left n'ont d'effet que sur les éléments positionnés, c'est-à-dire tout élément dont la position est différente de static. Sur un élément static, elles sont ignorées.
Le référentiel de chaque décalage dépend de la valeur utilisée :
relative— les décalages sont mesurés à partir de la position normale de l'élément.topetbottomle déplacent verticalement ;leftetrightle déplacent horizontalement. L'espace qu'il occupait initialement est préservé, ce qui signifie que le contenu environnant ne se déplace pas.absolute— les décalages sont mesurés depuis les bords du bloc conteneur : l'ancêtre le plus proche qui est lui-même positionné (relative,absolute,fixedousticky). Si aucun ancêtre de ce type n'existe, les décalages sont relatifs au bloc conteneur initial (approximativement l'élément<html>/ la page).fixed— les décalages sont mesurés par rapport au viewport, de sorte que l'élément reste fixe pendant le défilement de la page.sticky— les décalages définissent un seuil ; l'élément se comporte commerelativejusqu'à ce que vous dépassiez ce seuil, puis il se fixe commefixeddans son conteneur de défilement.
Une erreur fréquente consiste à attendre qu'un enfant
absolutes'aligne sur son parent sans avoir définiposition: relative(ou toute valeur non statique) sur ce parent. Ajouterposition: relativeau parent — même sans décalages — en fait le bloc conteneur. Ce schéma « parent relatif, enfant absolu » est la base de la plupart des mises en page positionnées.
| Valeur initiale | static |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non. |
| Animatable | Non. |
| Version | CSS2 |
| Syntaxe DOM | Object.style.position = "sticky"; |
Syntaxe
Syntaxe CSS de la propriété position
position: static | absolute | fixed | relative | sticky | initial | inherit;Un exemple simple avec absolute
Ici, position: absolute sort le paragraphe du flux et le place à 40px de la gauche et à 120px du haut de la page (aucun ancêtre positionné n'existe, la page sert donc de référence) :
Exemple de code CSS position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
position: absolute;
left: 40px;
top: 120px;
}
</style>
</head>
<body>
<h2>Position property example</h2>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Résultat
Exemple de la propriété position avec toutes les valeurs :
Exemple CSS position avec toutes les valeurs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#box1 {
position: static;
border: 2px solid #666;
width: 300px;
height: 100px;
}
#box2 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box3 {
position: relative;
border: 2px solid #666;
width: 300px;
height: 100px;
}
#box4 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box5 {
position: absolute;
border: 2px solid #666;
width: 320px;
height: 100px;
top: 750px;
right: 25px;
}
#box6 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box7 {
position: fixed;
border: 2px solid #8ebf42;
background-color: #eee;
width: 300px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
}
#box8 {
position: absolute;
border: 2px solid #666;
top: 70px;
right: 15px;
}
</style>
</head>
<body>
<h2>Position property example</h2>
<h3>Position: static</h3>
<p>
The Box1 element remains in the natural flow of the page and does not act as anchor point for the absolutely positioned Box2 element:
</p>
<div id="box1">
Box1: position: static.
<div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: relative</h3>
<p>
The Box3 element remains in the natural flow of the page and also acts as anchor point for the absolutely positioned Box4 element:
</p>
<div id="box3">
Box3: position: relative.
<div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: absolute</h3>
<p>
The Box5 element does not remain in the natural flow of the page. It positions itself according to the closest positioned ancestor and also acts as anchor point for the absolutely positioned Box6 element:
</p>
<div id="box5">
Box5: position: absolute, top: 750px, right: 15px.
<div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: fixed</h3>
<p>
The Box7 element does not remain in the natural flow of the page and positions itself according to the viewport and acts as anchor point for the absolutely positioned Box8 element:
</p>
<div id="box7">
Box7: position: fixed, bottom: 0, left: 0, right: 0.
<div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
</div>
</body>
</html>Dans cet exemple, box1 (static) et box3 (relative) restent dans le flux normal, mais seul box3 agit comme bloc conteneur pour son enfant positionné en absolu, car relative en fait un ancêtre positionné alors que static ne le fait pas. box5 et box7 sont extraits du flux et positionnés respectivement par rapport à la page et au viewport.
Positionnement sticky
Un élément sticky défile normalement jusqu'à atteindre le décalage spécifié (ici top: 1px), puis se « colle » à cet endroit dans son conteneur de défilement. C'est idéal pour les en-têtes de tableaux, les étiquettes de section et les barres d'outils qui doivent rester visibles tant que leur section est à l'écran. Notez que le positionnement sticky ne fonctionne que lorsque l'ancêtre défilant de l'élément est en cours de défilement, et que cet ancêtre ne doit pas avoir overflow: hidden qui le rognerait.
Exemple de la propriété position avec la valeur « sticky » :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
height: 150px;
overflow: auto;
position: relative;
background-color: #cccccc;
padding: 0;
}
ul li {
list-style-type: none;
height: 30px;
padding: 10px 10px 0;
}
ul li:first-child {
position: -webkit-sticky;
position: sticky;
top: 1px;
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Example of the position property with the "sticky" value:</h2>
<ul>
<li>Sticky List Item</li>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
</ul>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| static | Les éléments sont placés selon le flux normal du document. Il s'agit de la valeur par défaut de cette propriété. | Essayer » |
| absolute | Les éléments sont retirés du flux du document et positionnés par rapport à leur ancêtre positionné. | Essayer » |
| fixed | Les éléments sont retirés du flux du document et positionnés par rapport à la fenêtre du navigateur. | Essayer » |
| relative | L'élément est placé par rapport à sa position normale ; les propriétés de décalage le déplacent sans supprimer son espace d'origine. | Essayer » |
| sticky | Les éléments sont positionnés selon le flux normal du document, puis décalés par rapport à leur ancêtre défilant le plus proche et au bloc conteneur. | |
| initial | Applique la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite de la valeur de la propriété depuis l'élément parent. |
Quand utiliser quelle valeur
static— laissez-le tel quel pour le contenu normal du document. Vous définissez rarementstaticexplicitement, sauf pour réinitialiser une règle de positionnement.relative— pour effectuer de petits ajustements visuels, ou, le plus souvent, pour transformer un élément en bloc conteneur pour un enfantabsolutesans le retirer du flux.absolute— pour les superpositions, badges, info-bulles et menus déroulants qui doivent être placés précisément à l'intérieur d'un parentrelative.fixed— pour les éléments épinglés au viewport : en-têtes fixes qui ne bougent jamais, boutons « retour en haut », bannières de cookies et modales.sticky— pour les en-têtes ou étiquettes qui doivent défiler avec le contenu jusqu'à un certain point puis rester visibles.
Lorsque des éléments positionnés se chevauchent, leur ordre d'empilement est contrôlé par la propriété z-index. Le positionnement est également souvent combiné avec float, display et overflow lors de la création de mises en page.