Mettre des img les une sur les autres

24 Feb 2022 à 18:55

Bonjour,
J'aimerai savoir comment faire en sorte que mon code CSS me permettent de faire comme je veux, c'est a dire superposer des images.
Mon code sera plus clair.
Le Voici:

<div class="img">
		<img class="banane img" src="img/banane.png" width="128" onmouseover="aleatoireBanane()" onclick="window.location='win/banane.html'">
		<img class="poire img"  src="img/poire.png" width="64" onmouseover="aleatoirePoire()" onclick="window.location='win/poire.html'">
		<img class="pomme img" src="img/pomme.png" width="75" onmouseover="aleatoirePomme()" onclick="window.location='win/pomme.html'">
		<img class="saladier img" src="img/saladier.png">
		<img class="table" src="img/table.png">
	</div>

Et mon code CSS :

.img{
	text-align: center;
}

Etant nul en code je voudrais savoir comment faire comme l'image ci-joint.
Cordialement,
upload/1645725308-83941-cequejeveux.png

gcyrillus

Modérateur

24 Feb 2022 à 19:41

Bonsoir,

pour superposer, il y a le positionement absolute dans un container en relative, et il y a aussi grid en attrinuant la même cellule à tout les enfants.

exemple possible en grid:

.img {
display:grid;
}
.img img {
grid-row:1;
grid-column:1;
}

Que ce soit via position: relative/absolute , ou grid/grid-row/grid-column , sans en savoir plus sur les dimensions de tes images , on ne pourras pas te conseiller pour les réglages.

Cdt

BurgerKingKong

25 Feb 2022 à 17:40

Merci cela a réglé mon problème.
Amicalement,

CSS et mise en forme, CSS3

Mettre des img les une sur les autres