Bonjour,
Je voudrais savoir quelle est la différence entre position absolute et relative.
Je vous remercie
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.
✪ Pensez à ✪
➭ lire les règles du forum ➭ effectuer une recherche préalable
➭ utiliser la balise code (#) ➭ éditer votre code sur Codepen, Dabblet, Jsfiddle
➭ clore votre post avec le bouton
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum
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" :
Envoyé par W3CAvec le complément nécessaire pour bien comprendre le bloc conteneur qui servira de référence pour un positionnement absolu:Envoyé par vf
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.
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager