Propriété CSS position
- page précédente pointer-events
- Page suivante @property
Définition et utilisation
L'attribut position détermine le type de positionnement de l'élément.
Explication
Cette propriété définit le mécanisme de positionnement utilisé pour établir la mise en page de l'élément. Toute élément peut être positionné, mais les éléments absolus ou fixes génèrent un cadre de bloc, quel que soit le type de l'élément lui-même. Les éléments de position relative se déplacent par rapport à leur position normale dans le flux normal.
Voir également :
Tutoriel CSS :Positionnement CSS
Manuel de référence HTML DOM :Attribut position
Exemple
Positionner l'élément h2 :
h2
{
position:absolute;
left:100px;
top:150px;
}
Syntaxe CSS
position: static|absolute|fixed|relative|sticky|initial|hérité;
Valeur de l'attribut
| Valeur | Description |
|---|---|
| absolute |
Génère un élément de position absolute, positionné par rapport au premier parent en dehors de la position static. La position de l'élément est déterminée par les attributs "left", "top", "right" et "bottom". |
| fixed |
Génère un élément de position absolute, positionné par rapport à la fenêtre du navigateur. La position de l'élément est déterminée par les attributs "left", "top", "right" et "bottom". |
| relative |
Génère un élément de position relative, positionné par rapport à sa position normale. Par conséquent, "left:20" ajoute 20 pixels à la position LEFT de l'élément. |
| static | Valeur par défaut. Sans position, l'élément apparaît dans le flux normal (ignorez les déclarations top, bottom, left, right ou z-index). |
| hérité | Définit que la valeur de l'attribut position doit être héritée de l'élément parent. |
Détails techniques
| Valeur par défaut : | static |
|---|---|
| Héritabilité : | non |
| Version : | CSS2 |
| Syntaxe JavaScript : | object.style.position="absolute" |
Essayer par vous-même
- Positionnement : position relative
- cet exemple montre comment positionner un élément par rapport à sa position normale.
- Positionnement : position absolue
- cet exemple montre comment utiliser des valeurs absolues pour positionner un élément.
- Positionnement : position fixe
- cet exemple montre comment positionner un élément par rapport à la fenêtre du navigateur.
- Définir la forme de l'élément
- cet exemple montre comment définir la forme d'un élément. Cet élément est découpé dans cette forme et affiché.
- Z-index
- Z-index peut être utilisé pour placer un élément après un autre.
- Z-index
- L'élément dans l'exemple suivant a changé de Z-index.
Support du navigateur
Les numéros dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en pleine mesure.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
- page précédente pointer-events
- Page suivante @property
