Question

我有一个图像，它改变了窗口大小的大小，我需要在它上面放置一个元素（锚标记），使它总是在相对于图像的相同位置。图像不是背景图像，而是HTML元素。

此问题非常相似，但适用于图像为背景图像的情况。 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

你的意思是这样吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

将图像等包裹在一个收缩包装的div中，并将定位基于该位置。

＆＃13;

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

＆＃13;

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

＆＃13;

Codepen Demo

将元素放在图像元素上，但图像随窗口改变大小

3 个答案: