Skip to main content

Position

La propriété CSS position permet de positionner un élément par rapport à son conteneur parent ou par rapport à la fenêtre du navigateur.
Les valeurs courantes de position incluent static, relative, absolute, fixed et sticky, chacune affectant le positionnement et le flux de l'élément.

static​

C'est le comportement par défaut de tous les éléments HTML dans une page web. Dans le modèle de boîte CSS, tous les éléments HTML sont rendus avec un positionnement statique par défaut.

Cela signifie que les éléments sont positionnés dans le flux normal du document, en suivant l'ordre dans lequel ils sont définis dans le code HTML.

Ainsi, les éléments sont rendus les uns après les autres, de haut en bas et de gauche à droite, en respectant les marges et les paddings définis.

example!

Les éléments avec un positionnement statique n'ont pas besoin d'être explicitement définis comme tels dans le code CSS, car c'est leur comportement par défaut.

Mais il est possible de spécifier le positionnement statique pour des raisons de clarté et de lisibilité du code.

.exemple {
    position: static;
}

La propriété position: static; peut être appliquée à un élément pour définir explicitement son positionnement comme statique.

Limites​

Bien que le positionnement statique soit utile pour la plupart des éléments dans une mise en page standard, il présente certaines limitations.

Par exemple, les éléments positionnés de manière statique ne peuvent pas être déplacés de leur position normale dans le flux du document sans utiliser d'autres techniques de positionnement telles que le positionnement relatif, absolu ou fixe.

Utilisation​

Malgré ses limitations, le positionnement statique est largement utilisé dans la conception web.

Les éléments tels que les div, p, a, nav sont souvent rendus avec un positionnement statique car cela correspond à leur comportement naturel dans le flux du document.

De plus, l'utilisation du positionnement statique peut simplifier le code CSS en évitant la nécessité de spécifier explicitement le positionnement pour chaque élément.

relative​

Le positionnement relatif en CSS est une technique qui permet de déplacer des éléments par rapport à leur position normale dans le flux du document.

Utilité​

Permet de déplacer un élément par rapport à sa position normale dans le flux du document. C'est à dire de faire l'inverse de static.
Contrairement au positionnement absolu, les éléments avec un positionnement relatif restent dans le flux normal du document, mais peuvent être déplacés en utilisant les propriétés top, bottom, left et right.

Css​

Pour appliquer le positionnement relatif à un élément en CSS, il faut utiliser la propriétée position: relative;.
Ensuite il faut lui indiquer l'écart qu'on veut lui donner soit vis à vis du haut, du bas, de la droite ou la gauche.

.example {
    position: relative;
    top: 20px;
    left: 10px;
}

Dans cet exemple, la classe .example est définie avec un positionnement relatif. les propriétés top et left sont utilisées pour déplacer l'élément de 20 pixels vers le bas et de 10 pixels vers la droite par rapport à sa position normale dans le flux du document.

On voit clairement que l'élément n'est pas extrait du flux normal de l'affichage mais juste "déplacer" par rapport à sa position static.

Déplacement​

Quand on utilise un positionnement relatif à un élément, les valeurs des propriétés top, bottom, left et right spécifient le déplacement par rapport à la position normale de l'élément.
Donc une valeur positive pour top déplace l'élément vers le bas, tandis qu'une valeur négative déplace l'élément vers le haut par rapport à sa position static.

Utilisation​

Le positionnement relatif est souvent utilisé pour ajuster légèrement la position d'un élément par rapport à sa position normale dans la mise en page.
Par exemple, il peut être utilisé pour créer des décalages subtils entre les éléments adjacents, pour aligner des éléments dans une grille, ou pour créer des effets de superposition avec d'autres éléments.

Combinaison​

Le positionnement relatif peut également être combiné avec d'autres techniques de positionnement telles que le positionnement absolu pour créer des mises en page complexes.
En utilisant le positionnement relatif comme conteneur, il est possible de positionner les éléments enfants de manière absolue par rapport à ce conteneur plutôt que par rapport au document ou à d'autres éléments.

absolute​

Le positionnement absolu en CSS est une technique puissante qui permet de positionner un élément par rapport au document ou à un conteneur parent.

Absolue par rapport à quoi​

Document​

Lorsqu'un élément a un positionnement absolu par rapport au document ( la strucutre html ), il est retiré du flux normal du document ( le positionement static ) et positionné par rapport aux bords supérieur, inférieur, gauche ou droit de la fenêtre du navigateur. C'est à dire top, bottom, right, left.

Ce qui en css donne les propriétés top, bottom, left et right qui sont utilisées pour spécifier les coordonnées exactes de l'élément par rapport au document.

Parent​

En revanche, lorsque le positionnement absolu est appliqué à un élément à l'intérieur d'un conteneur parent qui a un positionnement autre que static (par exemple, relative, absolute ou fixed), l'élément est positionné par rapport à ce conteneur parent.
Dans ce cas, les coordonnées spécifiées par les propriétés top, bottom, left et right sont relatives aux bords du conteneur parent, plutôt qu'au document.

Syntax​

Pour appliquer le positionnement absolu à un élément en CSS, il faut utiliser la propriété position: absolute;.

.example {
    position: absolute;
    top: 50px;
    left: 20px;
}

Ici la classe .example est définie avec un positionnement absolu et les propriétés top et left sont utilisées pour spécifier les coordonnées de l'élément par rapport au document ou à son conteneur parent.

Utilisation​

Le positionnement absolu est souvent utilisé pour créer des éléments qui doivent être positionnés de manière précise par rapport à d'autres éléments sur la page.
Par exemple, il peut être utilisé pour positionner des pop-ups, des menus déroulants, des boîtes de dialogue, des éléments de navigation, etc.
Il offre une grande flexibilité pour la conception de mises en page complexes et interactives.

Comparaison​

Il est important de noter que le positionnement absolu est différent du positionnement relatif et fixe.

Alors que le positionnement relatif déplace un élément par rapport à sa position normale dans le flux du document, et que le positionnement fixe le positionne par rapport à la fenêtre du navigateur, le positionnement absolu lui permet d'être positionné par rapport au document ou à un conteneur parent spécifique.

fixed​

C'est une propriété CSS qui permet de fixer un élément à une position spécifique sur la fenêtre du navigateur.
Contrairement aux autres types de positionnement, un élément positionné en fixed reste à une position fixe sur l'écran, même lorsque l'utilisateur fait défiler la page.

La syntaxe CSS pour définir un positionnement fixe est la suivante :

.element {
    position: fixed;
    top: 0; /* Position par rapport au haut de la fenêtre du navigateur */
    left: 0; /* Position par rapport à la gauche de la fenêtre du navigateur */
    /* Autres propriétés de style */
}

Caractéristiques​

  • L'élément positionné en fixed est retiré du flux normal du document, ce qui signifie qu'il ne prend pas de place dans le flux et n'affecte pas la position des autres éléments.
  • Il reste à une position fixe par rapport à la fenêtre du navigateur, quelle que soit la position du défilement de la page.
  • Les propriétés top, bottom, left et right sont utilisées pour définir la position de l'élément fixé par rapport aux bords de la fenêtre du navigateur.

Utilisation​

Barres de navigation fixées en haut de la page​

Les barres de navigation qui restent visibles en haut de la page même lorsque l'utilisateur fait défiler vers le bas sont souvent implémentées avec un positionnement fixe.

Boutons d'action persistants​

Les boutons ou les éléments d'action qui doivent rester visibles à tout moment pour faciliter l'interaction de l'utilisateur sont souvent positionnés de manière fixe.

Annonces publicitaires flottantes​

Les annonces publicitaires qui restent visibles à une position fixe sur la page, même lorsque l'utilisateur fait défiler le contenu, utilisent souvent un positionnement fixe.

sticky​

La propriété CSS position: sticky est une fonctionnalité puissante qui permet de rendre les éléments positionnés de manière dynamique lors du défilement de la page.
Elle combine les comportements du positionnement relative et fixed, en fonction de la position de l'élément par rapport au viewport.

Utilisation​

L'utilisation principale de "position: sticky" est de maintenir un élément à une position spécifique sur la page jusqu'à ce que certaines conditions de défilement soient remplies.
Lorsque ces conditions sont atteintes, l'élément devient "collant" et reste à sa position fixe tant que le défilement se poursuit dans la plage spécifiée.

remarque

Il est important de noter que la prise en charge de `position: sticky varie selon les navigateurs.
Bien qu'elle soit largement supportée sur les navigateurs modernes, il est conseillé de toujours vérifier la compatibilité avec les navigateurs.
Le site can i use est utile pour vérifier ce genre de choses.

Syntaxe​

La propriété position: sticky nécessite généralement trois valeurs : top, right, bottom ou left, qui spécifient à quelle distance de chaque bord de l'élément la "collante" doit être activée.
Par exemple, top: 0 signifie que l'élément deviendra collant dès qu'il atteindra le haut de son conteneur parent.