Bild in Verhältnis zu Bild positionieren

[Shiela]

Hallo.

Ich versuche mich gerade hobbymäßig an einer kleinen Website und schietere daran, dass ich meine Bilder nicht richtig positionieren kann. Mein Ziel ist, dass das zweite Bild ("Stecker1") immer auf dem selben Fleck auf dem zweiten Bild bleibt ("Karte"). Die Angabe der Breite habe ich schon hinbekommen, aber bei der Höhe verscheibt sich mein Bild ständig, da ich oben noch Text habe, der je nach Einstellung unterschiedlich hoch ist und so die Gesamthöhe verändert. Meiner Meinung nach müsste ich also das zweite Bild irgendwie in ein Verhältnis zum ersten Bild setzten, weiß aber nicht, wie das geht... Kann mir jemand helfen?

Der Code ist:

CSS:

	#Karte {
     height:auto; width:70%; 
     margin-top: 50px; margin-left:15%; margin-bottom: 100px; 
     border-style: inset; 
     border-width: 10px;
     border-color: #81DAF5;
     position: relative; 
     z-index: 0
   }	

	#Stecker1 {
     width: 5%; 
     margin-left: -30%; padding-top: 30%; 
     position: absolute; align: bottom; 
     z-index: 2
  }

Html:

	<img src='Stecker.png' id='Stecker1'> </img>

	<img src='Karte.jpg' id='Karte' align='left'> </img>

Lg Shiela