Comment mettre une image au dessus d'une autr

Bonjour,

J'ai un petit soucis, j'aimerai afficher des boutons image au dessus d'une image.
Sur mon ordinateur tout fonctionne parfaitement mais si je teste sur un autre ordi avec une largeur d'écran différente, les images du dessus ne se retrouvent pas du tout au même endroit.

Je pense que je m'y prend mal avec mes z-index.

Quelqu'un pourrais t'il m'aider à trouver le code pour que ca fonctionne sur tout type d'écran?

Je cvous laisse mon code :

Code CSS:

.plan 
{
	top: 20;
  	left: 0;
  	width: 100%;
 	z-index: 1;	   
}
.cuisine 
{
	top: 95%;
	left: 35%;
	z-index: 2;
	position:absolute;
}
.chambre_adulte 
{
	top: 115%;
	left: 57%;
	z-index: 2;
	position:absolute;
}

.chambre_enfant 
{
	top: 115%;
	left: 35%;
	z-index: 2;
	position:absolute;
}
.salle 
{
	top: 115%;
	left: 45%;
	z-index: 2;
	position:absolute;
}
.salon 
{
	top: 91%;
	left: 45%;
	z-index: 2;
	position:absolute;
}
.sdb 
{
	top: 91%;
	left: 57%;
	z-index: 2;
	position:absolute;
}

Code php:

<div class="plan">
<img src="images_site/plan.jpg"/>
</div>

<div class="cuisine">
<a href="cuisine.php" class="type2" ><img src="images_site/bouton_pieces/cuisine.jpg"/></a></div>


<div class="chambre_adulte">
<a href="chambre_adulte.php" class="type2"><img src="images_site/bouton_pieces/chambre_adulte.jpg"/></a>
</div>

<div class="salle">
<a href="salle.php" class="type2" ><img src="images_site/bouton_pieces/salle.jpg"/></a>
</div>

<div class="chambre_enfant">
<a href="chambre_enfant.php"class="type2" ><img src="images_site/bouton_pieces/chambre_enfant.jpg"/></a>
</div>


<div class="salon">
<a href="salon.php" class="type2" ><img src="images_site/bouton_pieces/salon.jpg"/></a>
</div>

<div class="sdb">
<a href="sdb.php" class="type2" ><img src="images_site/bouton_pieces/sdb.jpg"/></a>
</div> 

Merci pour votre aide