Html, css position image

Actually I want to place an image on an other one, but the problem is the size of my first image change in function of screen size so I don't know how to make a variable position in function of the first image size.

html :

         <img src="carte.jpg" id="carte"></img>
    <img src="bouton.png" id="bouton1" onmouseover="this.src='boutons.png'" onmouseout="this.src='bouton.png'"> </img>