CSS relatif + droite (ou en bas) ne fonctionne presque JAMAIS
J'écris en CSS depuis pas mal de temps maintenant.
J'ai remarqué que
<div style="position: relative; right: 20%; bottom: 20%;">some text</div>
ne fonctionne jamais!
le positionnement relatif fonctionnerait avec gauche et haut spécifié mais pas avec droite/bas. Pourquoi?
Une solution rapide consiste à utiliser «absolute» à la place et à spécifier right/bottom en pixels, mais j'ai besoin d'une raison.
Aussi, corrigez-moi si je me trompe. Que le conteneur externe soit positionné de manière absolue ou relative, est-il insensé de positionner quelque chose de "relatif" aux limites de ce conteneur ou faut-il toujours que les éléments à l'intérieur d'un conteneur soient toujours positionnés "absolu"?
Je vous remercie.
From Absolute vs. Relative - Explication du positionnement CSS
Le positionnement relatif utilise les quatre mêmes propriétés de positionnement que le positionnement absolu. Mais au lieu de baser la position de l'élément sur le port d'affichage du navigateur, il commence à partir de l'endroit où se trouverait l'élément s'il se trouvait toujours dans le flux normal .
Le positionnement relatif fonctionne avec les valeurs inférieures/droites, mais pas exactement comme vous le souhaitiez:
Pensez aux valeurs de position sur les éléments relatifs en tant que marges, que les éléments environnants ignorent tout simplement. Les "marges" déplaceront toujours l'élément par rapport à sa position précédente dans le flux de documents normal, mais le supprimeront du flux normal en même temps.
Lorsqu'ils sont hors du flux de documents normal, les éléments environnants agissent comme s'ils se trouvaient dans sa position d'origine dans le flux normal ... C'est pourquoi un élément relatif peut chevaucher son parent (comme dans Rel 1).
Avez-vous essayé cela?
<div style="position: relative; right: -20%; bottom: -20%;">some text</div>
ou plutôt
<div style="position: relative; right: -80%; bottom: -80%;">some text</div>