Bonjour,

j'aimerai avoir un renseignement concernant la propriété position avec l'attribut relative.

Sur un autre site, il y a un cours avec des exemple ou on peut changer l'attribut et les blocs changes de position.
Mais je ne comprends pas le positionnement avec relative en x, car quand je fait un imprime écran les distances en pixels ne corresponde pas avec la position relative.

Je vous met l'image :

upload/1563256225-76166-positioninherit.jpg

Ici le problème pour moi c'est que normalement si c'est relative le carré vert ne devrait pas être à 30px du carré bleu mais à 40 et pour le jaune il ne devrait pas être à une distance de 0px du vert mais à 40 donc je ne comprends pas bien.
Si vous pouviez m'expliquer.

Merci.
Modifié par hbx360 (16 Jul 2019 - 07:57)
Administrateur
Hello,

La position relative ne correspond pas du tout à ce que tu crois.

L'élément n'est pas "relatif à un autre élément". Il est simplement relatif à sa position initiale et éventuellement décalé. Exprimé autrement, la position relative n'est rien d'autre qu'un décalage par rapport à la place initiale.
left: 10px signifie donc simplement que l'élément est décalé de 10px par rapport au référentiel de gauche, il ira donc à droite de 10px.

Tu as perdu beaucoup de temps à tenter des démonstrations et des hypothèses, bien que les règles se trouvent assez facilement.

En voici certaines très claires :
- https://openweb.eu.org/articles/initiation_flux
- https://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
- https://developer.mozilla.org/fr/docs/Web/CSS/position

Bonne journée Smiley smile
Modifié par Raphael (16 Jul 2019 - 09:21)
Meilleure solution