English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La propriété CSS position spécifie comment un élément est positionné.
Le tableau suivant décrit l'utilisation et l'historique des versions de cette propriété, ainsi que la syntaxe de cette propriété dans les scripts JavaScript.
| Valeur par défaut : | static |
|---|---|
| Appliqué à : | Tous les éléments |
| Héritage : | Aucun |
| Animable : | Non.Voir également Propriétés d'animation。 |
| Version : | CSS 2、3 |
| Grammaire JavaScript : | object.style.position="absolute" |
Conseil :Les éléments position autres que static sont appelés placement. Ils occupent une position verticale dans l'environnement de pile déterminée par z-déterminée par l'attribut index.
La syntaxe de cette propriété est la suivante :
position: static | relative | absolute | fixed | sticky | initial | inherit
Les exemples suivants montrent comment utiliser la propriété position.
h1 {
position: absolute;
top: 100px;
left: 150px;
}Vérifiez et voyez‹/›Attention : Pour les types de média d'impression, ce cadre est présent sur chaque page et est fixé par rapport au cadre de la page, même si la page est vue à travers une viewport (par exemple, dans le cas de l'«aperçu avant impression»).
Le tableau suivant décrit les valeurs de cette propriété.
| Valeur | Description |
|---|---|
| static | Le boîtier de cet élément est un boîtier normal, suivant le flux normal. Pour les cadres statiques,top，right，bottom，left，etz-indexLa propriété sera ignorée. C'est la valeur par défaut. |
| relative | L'élément est positionné par rapport à sa position normale (ce qui s'appelle la position dans le flux normal). |
| absolute | L'élément est positionné par rapport à son premier ancêtre qui n'est pas statique. |
| fixed | Cet élément est fixé par rapport à la viewport de l'écran et ne bouge pas lors du défilement. Lors de l'impression, l'élément est imprimé sur chaque page. |
| sticky | La position de cet élément est similaire à un cadre placé de manière relative, et «collé» à son ancêtre le plus proche ayant un mécanisme de défilement. |
| initial | Définir cette propriété à sa valeur par défaut. |
| inherit | Si spécifié, l'élément lié utilise la valeur de la propriété position de son élément parent. |
La compatibilité du navigateur pour la propriété position, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.
|
Veuillez consulter les tutoriels suivants :Position CSS，Couche CSS。