CSS La propriété Position
Positionnement CSS
Le positionnement CSS concerne le contrôle de l'emplacement des éléments dans une page web.
Avec le positionnement CSS, vous pouvez modifier le flux normal du document.
La propriété CSS position
La propriété position spécifie le type de positionnement d'un élément.
Cette propriété peut avoir l'une des valeurs suivantes :
-
static- C'est la valeur par défaut -
relative -
fixed -
absolute -
sticky
Les éléments sont ensuite positionnés à leur emplacement final à l'aide des propriétés top , bottom , left , et right .
CSS position: static
Tous les éléments HTML sont positionnés de manière statique 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; est toujours positionné selon le flux normal de la page :
Voici le CSS utilisé :
Exemple
div.static {
position: static;
border: 3px solid #73AD21;
} CSS position: relative
Un élément avec position: relative; est positionné par rapport à sa position normale dans le flux du document.
Définir les propriétés top, right, bottom et left fera que l'élément sera ajusté par rapport à sa position normale. D'autres contenus ne seront pas ajustés pour combler l'espace laissé par l'élément.
Voici le CSS utilisé :
Exemple
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
} CSS position: fixed
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 est défilée. Les propriétés top, right, bottom et left sont utilisées pour définir l'emplacement final de l'élément.
Un élément fixe ne laisse pas d'espace dans la page où il aurait normalement été situé.
position: fixed; Remarquez l'élément fixe dans le coin inférieur droit de la page. Voici le CSS utilisé :
Exemple
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
} CSS position: absolute
Un élément avec position: absolute; est positionné par rapport à l'ancêtre positionné le plus proche (avec une position autre que statique).
Cependant, si un élément positionné absolument 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.
Remarque : Les éléments positionnés absolument sont retirés du flux normal du document et peuvent chevaucher d'autres éléments.
Voici un exemple simple :
Voici le CSS utilisé :
Exemple
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid green;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid red;
} CSS position: sticky
Un élément avec position: sticky; alterne entre une position relative et fixed , en fonction de la position de défilement.
Un élément collant est positionné relativement jusqu'à ce qu'une certaine position de défilement soit atteinte - puis il "colle" à cet endroit (comme position:fixed).
Remarque : Vous devez spécifier au moins l'une des propriétés top , right , bottom ou left pour que le positionnement collant fonctionne.
Dans cet exemple, lorsque l'élément collant atteint le haut de la page (top: 0), il reste à cette position :
Exemple
div.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
} Positionner du texte sur une image
Comment positionner du texte sur une image :
Exemple
Essayez-le vous-même :
Toutes les propriétés de positionnement CSS
| Propriété | Description |
|---|---|
| bottom | Définit le bord de marge inférieur pour une boîte positionnée |
| clip | Coupe un élément positionné absolument |
| left | Définit le bord de marge gauche pour une boîte positionnée |
| position | Spécifie le type de positionnement d'un élément |
| right | Définit le bord de marge droit pour une boîte positionnée |
| top | Définit le bord de marge supérieur pour une boîte positionnée |