Mise en page CSS - La propriété position
La positionproprié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é
La positionproprié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 la 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 :
Voici le CSS utilisé :
Exemple
div.static {
position: static;
border: 3px solid #73AD21;
}
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.
Voici le CSS utilisé :
Exemple
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position : fixe ;
Un élément avec position: fixed;est positionné par rapport à la fenêtre, 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.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
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, comme fixe).
Pourtant; 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.
Remarque : Les éléments positionnés en absolu sont supprimés du flux normal et peuvent chevaucher des éléments.
Voici un exemple simple :
Voici le CSS utilisé :
Exemple
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
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 relativeet fixed, en fonction de 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).
Remarque : 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 l'un des éléments top, right, bottomou leftpour que le positionnement permanent fonctionne.
Dans cet exemple, l'élément collant reste en haut de la page ( top: 0), lorsque vous atteignez sa position de défilement.
Exemple
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Positionnement du texte dans une image
Comment positionner du texte sur une image :
Exemple
Essayez-le vous-même :
Plus d'exemples
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |