28112 sujets

CSS et mise en forme, CSS3

[Résolu] Caler la position d'une img par-rapport à une autre

Bonjour à tous,

J'ai inséré une image représentant une carte dans une div. Cette image fait à la base 408px de large, et je l'ai rendu responsive à la taille du navigateur grâce à la propriété max-width=100%.

Dans la même div j'ai inséré une image qui doit être une icone placé sur la carte avec un lien associé. L'idée est que, en cliquant sur cette icone qui indique une partie de la carte (par exemple, la Franche-Comté sur la carte de la France), le navigateur dirige vers un article associé.
Pour caler mon icone sur la bonne partie de ma carte j'ai utilisé les propriétés suivantes :

position : absolute;
top : 55%
left : 24%

Le problème, c'est que ces propriétés sont relative à la div, et pas à l'image de la carte. Du coup quand je fais varier la taille de la fenêtre de navigation, et donc de la div, j'ai un décalage entre la carte et son icone.

Quelques images pour illustrer

width = 1000px

upload/1585668173-79217-100px.png


width=550px

upload/1585668210-79217-500px.png

width = 370px

upload/1585668237-79217-370px.png

Quelqu'un aurait une solution ?
Modérateur
Salut,

As-tu essayé de center la carte et le placer l'icone à 
top:50%:
left:50%;
puis de déplacer ton icone la ou tu veux avec une 
transform:translate(10px,10px);


Si l'image de la carte ne change pas de taille et seulement son conteneur ca devrait marcher.
_laurent, j'ai l'impression que le problème reste un peu le même.

En fait, voilà à quoi ressemble mon html

<div class="carte">
<div class="responsive">
<img src="img/france-carte.png" class="france-carte" alt="carte de la france"/>
<div class="icone-position">
<img src="img/icone.png" class="icone" alt="icone"/>
</div>
</div>
</div>

Et mon css

.carte{
display: flex;
text-align: center;
justify-content: center;
}

.responsive{
text-align: center;
width: 408px;
}

img.france-carte{
max-width: 100%;
}

.icone-position{
position: absolute;
left: 33%;
top:40%;
}

En gros, mon icone se situe dans la div "icone-position", elle-même située dans la div "responsive" qui fait strictement la même largeur que ma carte.
Pourtant, quand j'applique les propriétés "absolute", "left" et "top" à la div "icone-position", sa position varie selon la largeur du viewport, et pas selon celle de la div "responsive" qui est pourtant son conteneur parent.
Je pensais que c'était ainsi que fonctionnait la propriété "absolute", mais apparemment non.
Du coup je ne sais pas trop quoi faire.
Alors au final j'ai l'impression d'avoir trouvé une solution.
En fait j'ai attribué la propriété position:relative à la div ".responsive".
Je ne sais pas pourquoi mais à ce moment j'ai l'impression que l'img "icone" s'est enfin positionnée par-rapport à "responsive" avec la propriété "absolute", et ensuite "top", "bottom", etc.

Ci-joint l'HTML et le CSS modifié. 


<div class="carte">
	<div class="responsive">
		<img src="img/france-carte.png" class="france-carte" alt="carte de la france"/>
		<img src="img/icone.png" class="icone" alt="icone"/>
	</div>
</div>




.carte{
	display: flex;
    text-align: center; /**centre les éléments de la div, sauf si ils répondent à une propriété position**/
    justify-content: center;
}

.responsive{
    text-align: center; /**centre les éléments de la div, sauf si ils répondent à une propriété position**/
    width: 408px;
    position: relative;
}

img.france-carte{
    max-width: 100% /**permet de rendre l'image responsive au changement de taille du navigateur, 
    sachant que sa largeur maximale sera celle de l'image elle-même (en l'occurence, 408px)
    Si l'on attribue la propriété width=100%, à ce moment-là l'image s'adapte à la taille de la div**/
}

.responsive img.icone{
    position: absolute;
    left: 50%;
    top:50%;
}
Administrateur
Bonjour,

un élément positionné en absolu a pour référence le 1er ancêtre positionné (et s'il n'y en a pas, alors c'est l'élément body qui fait office de).
Un élément est dit positionné lorsque la valeur de position n'est pas static, pas celle par défaut (donc relative, absolute ou même fixed ou sticky).
Ici c'est bien .responsive qui semble devoir être positionné et pas .carte (trop large) ou body (si tu ne fais rien).

Astuce de débogage : tu peux ajouter .responsive { outline: 3px dotted darkred; } pour voir ce qui se passe. Ça me fait en général gagner un temps fou en tout cas.
Meilleure solution
En effet, comme le dit Felipe : "un élément positionné en absolu a pour référence le 1er ancêtre positionné"
Donc ajouter position:relative au div .responsive fait que l'icone se positionne maintenant par rapport à lui, et non plus par rapport au body.
Hello,

Pour ce genre de situation où je dois placer des éléments à un point précis, je positionne mes éléments en absolute et ensuite je fais un scale en média queries, comme ça tout reste à sa place quelque soit la taille voulue, petit exemple plus parlant:

<!DOCTYPE html>
<html>
	<head>
		
		
		<style>
	
			body {
				margin: 0;
				padding: 0;
				background-color: black;
				color: purple;
			}
			
			#img {
				width: 100%;
				border-radius: 15px;
			}
			
			#img, .text, .container { position: absolute; }
			
			
			.text { z-index: 2; }
			
			#paris {
				top: 90px;
				left: 180px;
			}
			#bordeaux {
				top: 230px;
				left: 90px;
			}
			#lyon {
				top: 200px;
				left: 260px;
			}
			
			.container {
				width: 400px;
				height: 400px;
				top: 0px;
				left: 0px;
			}
			
			/* Exemple avec hauteur d'écran inférieur à 500px */
			@media screen and (max-height: 500px) { .scale { transform: scale(.8); transform-origin: left top; } }
			
			/* Exemple avec écran en mode portrait */
			@media screen and (orientation: portrait) { .scale { transform: scale(.7); transform-origin: left top; } }

			
		</style>

	</head>
	
	<body>

		<div class="container">
				
			<div class="scale">
			
				<span id="paris" class="text">PARIS</span>
				<span id="bordeaux" class="text">BORDEAUX</span>
				<span id="lyon" class="text">LYON</span>
				
				<img id="img" src="https://upload.wikimedia.org/wikipedia/commons/5/55/Carte_France_geo_dep2.png"></img>

			</div>
		
		</div>

	
	</body>
</html>


Avec une ch'tite capture:
upload/1585727736-79129-capture.jpg
Modifié par stryk (01 Apr 2020 - 09:56)
Merci à tous, ces explications sont parfaites !

Est ce que je peux abuser encore un peu... ?

Même en attribuant la propriété max-width=100% à mon img "icône", et en attribuant la propriété display=flex à ma div "responsive", la taille de mon icône n'est pas responsive au changement de taille de ma fenêtre d'affichage.
Est ce que c'est dû à la position=absolute?

En vous remerciant
Effectivement, il y a des chances : la position absolute sort virtuellement l'élément du flux html, et donc de son conteneur.

Rien ne vaut un bon SVG...
Merci aliasdmdc, c'est donc l'utilisation de width=6% appliqué à mon img "icone" qui permet de la rendre responsive.
Sujet clos
Aller à