Position element over image element but the image changes size with the window

Question

I have an image which changes size to the windows size, and I need to position an element (anchor tag) on it so that it is always in the same place relative to the image. The image is not a background image but an HTML element.

This question is very similar but is for when the image is a background image. 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

<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 2

Do you mean something like this?

  .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> 

Answer 3

Wrap the image etc in an shrink-wrapped div and base the positioning off that.

 * { 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