Position absolute, relative

Bonjour,

Je voudrais savoir quelle est la différence entre position absolute et relative.

Je vous remercie

Bonjour,
je vous cite les définitions principales:
Positionnement absolu

On n'utilisera le positionnement absolu que dans les conditions suivantes:
1) si on sait comment faire pour positionner un élément en absolu par rapport à son parent ou ancêtre positionné ;
2) si on a une idée précise des conséquences du positionnement absolu (risque de chevauchement des contenus);
3) si on sait à l'avance quels sont les contenus qui seront ainsi positionnés, et si ces contenus ne risquent pas de prendre de l'ampleur et ainsi de déborder de l'espace défini.

Une fois ces précautions bien intégrées, on pourra utiliser le positionnement absolu de manière efficace pour quelques éléments de nos pages web.

Positionnement relatif

Pour l'essentiel, le positionnement relatif a deux usages concrets:
1) créer un nouveau référent pour les éléments enfants et descendants positionnés en absolu et
2) décaler légèrement (de quelques pixels, pas plus) un élément par rapport à sa position normale, pour réaliser un effet visuel. Toute autre utilisation, sans être impossible ou forcément incorrecte, est risquée.

:recherch: :fleche: Glossaire CSS

Citation:

Envoyé par rodolphebrd

je vous cite les définitions principales:

Les éléments que tu cites ne sont pas des définitions des deux positionnements mais plutôt quelques conseils d'utilisation en fonction d'expériences personnelles.

Par exemple, il n'est pas clairement spécifié que le contenu en absolu sort du flux. Ou encore les explications ne statuent pas sur qui sert de référence si plusieurs ancêtres (ou aucun) sont positionnés.

De même le "décaler légèrement", concernant le positionnement relatif, est aussi une interprétation personnelle. Il n'y aucun problème à utiliser un positionnement relatif pour plus que quelques pixels, du moment que l'on sait ce que l'on fait et donc maîtrise ce qui peut être appelé "risques" par l'auteur.

Perso j'encourage toujours les personnes à consulter en priorité la source de l'info: les recommandations du W3c (vf) plutôt que les interprétations d'autres personnes. Ce sont elles qui, d'après moi, méritent le terme de "définition principale" ;) :

Citation:

Envoyé par W3C

relative
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

absolute
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

Citation:

Envoyé par vf

relative
L'emplacement de la boîte est calculé selon le flux normal (ce qu'on appelle la position dans le flux normal). Ensuite la boîte est déplacée relativement à cette position dans le flux normal. Quand une boîte B a une position relative, l'emplacement de la boîte suivante est calculé comme si B n'avait pas été déplacée

absolute
L'emplacement de la boîte (et éventuellement sa taille) est déterminé par les propriétés 'left', 'right', 'top', et 'bottom'. Celles-ci spécifient les déplacements en fonction du bloc conteneur. Les boîtes en position absolue se situent hors du flux normal. Elles n'ont ainsi aucune influence sur la mise en forme des autres éléments de même degré de parenté. Bien que les boîtes en position absolue aient également des marges, celles-ci ne fusionnent pas avec d'autres marges ;

Avec le complément nécessaire pour bien comprendre le bloc conteneur qui servira de référence pour un positionnement absolu:

Citation:

10.1 Définition du "bloc conteneur"

La position et la taille de la boîte d'un élément sont parfois calculées par rapport à un certain rectangle, appelé le bloc conteneur de l'élément. On le définit ainsi :

Le bloc conteneur dans lequel se range l'élément racine (on l'appelle dans ce cas le bloc conteneur initial), est déterminé par l'agent utilisateur ;
Pour les autres éléments, sauf ceux en position absolue, le bloc conteneur est matérialisé par le bord du contenu de la boîte de type bloc de leur ancêtre le plus proche ;
Pour ceux des éléments avec une spécification 'position: fixed', le bloc conteneur est établi par la zone de visualisation ;
Pour ceux des éléments avec une spécification 'position: absolute', le bloc conteneur est établi par l'ancêtre le plus proche dont la valeur de la propriété 'position' est autre que 'static', de cette manière :

Quand l'ancêtre est un élément de type bloc, le bloc conteneur est matérialisé par le bord de l'espacement de cet ancêtre ;
Quand l'ancêtre est un élément de type en-ligne, le bloc conteneur dépend de la propriété 'direction'

Si cette propriété a la valeur 'ltr', les bords du haut et de gauche du bloc conteneur se confondent avec ceux de la première boîte générée par cet ancêtre, et les bords du bas et de droite avec ceux de la dernière boîte générée par celui-ci ;
Si cette propriété a la valeur 'rtl', les bords du haut et de droite du bloc conteneur se confondent avec ceux de la première boîte générée par cet ancêtre, et les bords du bas et de gauche avec ceux de la dernière boîte générée par celui-ci.

Quand il n'existe pas un tel ancêtre, c'est le bord du contenu de la boîte de l'élément racine qui établit le bloc conteneur.