[Résolu] % de quoi?

Bonjour
Je suis perdu dans le code suivant:

<div class="mapPoint" style="top:x%;left:y%;">
    <img src="circle.png" alt="" />
    <label class="W">Alexandrie</label>
</div>

.mapPoint {
    position:absolute;
    z-index:100;
    transform: translate(-50%, -50%);
    padding:2px;
}
.mapPoint label{
    position:absolute;
}
.mapPoint .E{???}
.mapPoint .W{????}
.mapPoint .N{????}
.mapPoint .S{????}

mapPoint: comme son nom l'indique, il s'agit d'un point sur une carte.
Sa position est définie dans l'attribut style qui est calculé par un script JS
Pour qu'il soit centré sur le point ainsi défini, l'attribut transform: translate(-50%, -50%); le décale en largeur et en hauteur. Cette partie du code fonctionne, j'ai bien une image correctement positionnée à l'endroit désiré.
label: il s'agit d'un texte qui donne le nom du lieu géographique.

Ce que je voudrais faire: définir les classes N, S, E, W de telle façon que le label se place:
class="N" au dessus du point, centré sur le point
class="S" au dessous du point, centré sur le point
class="W" à gauche du point
class="E" à droite du point

Pour cela, j'essaie de définir ces classes en jouant sur
- le positionnement par des "top:", "bottom:", "left:" right": X %
- un décalage exprimé par "transform: translate(Y%, Z%)

SI j'ai bien compris, X% est relatif à la largeur ou à la hauteur de <div class="mapPoint">
Y% est un pourcentage de la largeur du <label>, Z% est un pourcentage de la hauteur de <label>

Il doit y avoir quelque chose qui cloche, je n'arrive pas à trouver les bonnes valeurs.
Par exemple dans le cas ci-dessus j'ai mis:

.mapPoint .W{right:-100%;}

en pensant que ça mettrait la droite de <label> sur la gauche de <div>. Ce n'est manifestement pas le cas: le -100% s'applique à la largeur de <label>.

Pourriez vous m'aider à y voir clair?

Merci de votre aide
Modifié par PapyJP (30 May 2016 - 15:29)

Bonjour !

Alors il n'est pas certain que j'ai bien compris mais : dans cette histoire, votre cadre de référence, c'est votre image (c'est la seule chose qui ait une hauteur et une largeur dont le CSS tienne compte), c'est à partir d'elle que se font les références : right : -100%, cela veut dire le bord droit du label est décalé de 100% - c'est-à-dire de la largeur de l'image - vers la droite par rapport au bord droit de l'image...


Modifié par Zelena (30 May 2016 - 16:07)

Et donc pour mettre le label 'à l'ouest', c'est :

.mapPoint .W {right : 100%;}

Zelena a écrit :
Bonjour !
Alors il n'est pas certain que j'ai bien compris mais : dans cette histoire, votre cadre de référence, c'est votre image (c'est la seule chose qui ait une hauteur et une largeur dont le CSS tienne compte), c'est à partir d'elle que se font les références : right : -100%, cela veut dire le bord droit du label est décalé de 100% - c'est-à-dire de la largeur de l'image - vers la droite par rapport au bord droit de l'image...

C'est ce que je croyais, mais ce n'est pas ce que j'obtiens!!
voir http://jpmoularde.free.fr/maps/map-test.htm
Dans cet exemple, pratiquement tous les points ont un <label class="W">, en particulier le premier, Alexandrie.
http://jpmoularde.free.fr/maps/Alexandrie.png
Voici le code (généré par JS)

<div class="mapPoint" style="top:6%;left:31%;">
    <img alt="" src="circle.png">
    <label class="W" lang="fr">Alexandrie</label>
</div>

et le CSS qui produit cet effet:

.mapPoint {
    padding: 2px;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 100;
}
.mapPoint label {
    background-color: rgba(255, 255, 255, 0.25);
    position: absolute;
    white-space: nowrap;
}
.mapPoint .W {
    right: -100%;
}

Zelena a écrit :
Et donc pour mettre le label 'à l'ouest', c'est :

.mapPoint .W {right : 100%;}

Exact!
C'était bien le % de <div>, mais si je me goure de signe....
Mille mercis, c'est le genre de c.. qu'on passe des heures à rechercher sans les trouver!

Hello,

1- Les propriétés top, right, bottom et left se rapportent à la boîte parent (la zone "content-box" pour être précis).

Donc :
- left: 30% signifie que mon côté gauche se place à 30% du côté gauche de mon parent
- right: 100% signifie que mon côté droit se place à 100% du côté droit de mon parent (en clair il est caché à gauche du parent)

2- les transformations quand à elles se rapportent à l'élément lui-même et non à son parent.

Donc :
- translateX(50%) signifie que je suis décalé vers la droite de la moitié de ma propre largeur
- translate(-50%, -50%) signifie que je suis décalé de la moitié de la largeur et de ma hauteur (cette technique permet de "contrecarrer" les valeurs de left et top en général pour contrer l'élément en position absolute)

Je ne sais pas si j'ai éclairci les choses... ou le contraire

Raphael a écrit :
right: 100% signifie que mon côté droit se place à 100% du côté droit de mon parent(en clair il est caché à gauche du parent)

Si je puis me permettre, toujours par souci de clarté, peut-être faut-il préciser qu'il est caché que si le parent (dans ce cas, le div.mapPoint) a la règle overflow : hidden sinon l'enfant positionné en absolu se place simplement à l'extérieur de son parent... heureusement pour PapyJP...

Oui "caché" était un abus de langage en effet

Merci de ces précisions
Les choses sont bien comme je les avais comprises.... sauf que je m'étais mélangé les pinceaux entre rght:X% et right:-X%
Bien entendu l'overflow ne peut pas être caché dans ce cas de figure.