Positionselement über Bildelement, aber das Bild ändert die Größe mit dem Fenster

Question

Ich habe ein Bild, das die Größe der Fenstergröße ändert, und ich muss ein Element (Anker-Tag) so positionieren, dass es immer an der gleichen Stelle ist relativ zum Bild. Das Bild ist kein Hintergrundbild, sondern ein HTML-Element.

Diese Frage ist sehr ähnlich, ist aber für, wenn das Bild ein Hintergrundbild ist. Position element over background image. But the BG img changes size with the window. CSS

<img src="images/img.jpg" > 
<a href="3">Link that should be over the image in a certain location.</a> 

Answer 1

Wrap das Bild usw. in einer eingeschweißten und div Basis der Positionierung aus, dass.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.map { 
 
    margin: 10px; 
 
    border: 5px solid red; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.map img { 
 
    max-width: 100%; 
 
    display: block; 
 
} 
 
.box { 
 
    width: 5%; 
 
    height: 5%; 
 
    background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg); 
 
    background-position: top center; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    position: absolute; 
 
} 
 
#pin-1 { 
 
    top: 25%; 
 
    left: 36%; 
 
} 
 
.box:hover > .pin-text { 
 
    display: block; 
 
} 
 
.pin-text { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 75%; 
 
    white-space: nowrap; 
 
    display: none; 
 
} 
 
.pin-text h3 { 
 
    color: white; 
 
    text-shadow: 1px 1px 1px #000; 
 
}

<div class="map"> 
 
    <img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" /> 
 
    <div id="pin-1" class="box"> 
 
    <div class="pin-text"> 
 
     <h3>My House</h3> 
 
    </div> 
 
    </div> 
 
</div>

Codepen Demo

Answer 2

<div class="wrapper"> 
    <img src="images/img.jpg"> 
    <a href="3">Link that should be over the image in a certain location.</a> 
</div> 

<style> 
    .wrapper { 
     position: relative; 
    } 

    a { 
     position: absolute; 
     top: 10%; 
     left: 10%; 
    } 
</style> 

Answer 3

Haben Sie so etwas wie das zu bedeuten?

.image { 
 
     position: relative; 
 
     width: 100%; /* for IE 6 */ 
 
    } 
 
    
 
    a { 
 
     position: absolute; 
 
     top: 20px; 
 
     left: 0; 
 
     width: 100%; 
 
    }

<div class="image"> 
 
    
 
      <img src="http://kingofwallpapers.com/grey/grey-001.jpg"/> 
 
      
 
      <a href="3">Link that should be over the image in a certain location.</a> 
 
    
 
    </div>