Le positionnement relatif {relative}

 

La position relative d'un élément est calculée et déterminée par rapport à la position de l'élément précédent dans le code HTML Donc la boîte est au départ défini par le code traditionnel HTML et, ensuite ajusté avec du code CSS pour obtenir sa position finale.

Les balises DIV ou SPAN serviront dans ce cas à réaliser les instructions appropriées.

Autre formulation de la définition : Boîte d'abord est positionnée selon son flux normal, et ensuite elle est re-positionnée en fonction de ses propriétés CSS suivant les instructions placées dans le code source départ du fichier : top, bottom, right, left. Définitions et exemples en fond de cette page.

Il est important de noter que dans la pratique et bien que la possibilité existe, il vaut mieux éviter d'utiliser les valeurs top et bottom simultanément sur une même boîte, idem pour les valeurs right et left, car chez le visiteur dans certains cas l'affichage est incorrect et la restitution ne correspond plus au positionnement de départ prévu.

Savoir aussi que le déplacement d'une première boîte A n'a pas d'influence sur une seconde boîte B qui la suivrait, car la boîte B reçoit un emplacement comme si la boîte A n'avait pas existé. Il est donc possible avec le positionnement relatif de retrouver des boîtes imbriquées.

 

---

 

Vu qu'une boîte est positionnée quand la valeur de sa propriété "position" n'est pas "static", retenir les définitions suivantes des valeurs utilisables :

top = sert à définir la distance entre le bord supérieur d'une zone et celui de la zone environnante.

bottom = sert à définir la distance entre le bord inférieur d'une zone et celui de la zone environnante.

right = sert à définir la distance entre le bord de droite d'une zone et celui de la zone environnante.

left = sert à définir la distance entre le bord de gauche d'une zone et celui de la zone environnante.

 

Les valeurs numériques et de pourcentage sont utilisées. Les valeurs négatives sont admises et il est alors possible de parvenir à faire chevaucher deux zones.

Les boîtes dans un flux normal appartiennent à un contexte de mise en forme, bloc ou en-ligne, mais pas les deux en même temps. Les boîtes de bloc participent à un contexte de mise en forme bloc, les boîtes en-ligne à un contexte de mise en forme en-ligne.

retour vers page des calques, si vous en venez !

 

Voici un exemple de boîte en ligne: cliquez ici, retour assuré.

Voici un exemple de boîte en bloc: cliquez ici, retour assuré.