制作一个保持在图像顶部相同位置的响应按钮

Question

我想在响应式图片的顶部放置一个按钮，但不在中心，我希望它在图片中另一个按钮的顶部保持相同的位置。 这是我在jsfiddle 上的代码：

这是 HTML：

<div class="container">

  <div class="img">
      <img src="http://www.playful.ma/wp-content/uploads/2017/02/img.png" class="0">
  </div>

  <div class="overlay">
   <h4>My Button</h4>
</div>

这是css

.container{

  width: 100%;

}

.overlay{
  position:absolute;
  top:70%;
  left:60%;
  padding:10px;
  background:white;
  border-radius:10px;
}


.img{
  position:relative;
  width:100%;
  min-width: 100%;
}

我希望.overlay div 在调整浏览器大小时保持在图像中蓝色按钮顶部的相同位置。 谢谢。

Answer 1

使用这个 css 让你朝着正确的方向前进。

.container{
  width: 100%;
  position: relative
}

.overlay{
  position:absolute;
  top:63%;
  left:50%;
  padding:10px;
  background:white;
  border-radius:10px;
}

注意容器是position:relative;，覆盖是position:absolute;

Answer 2

您可以通过将图像设置为背景图像并使用具有视口单位字体大小的相对定位来非常接近。

.container{
  position: relative;
  padding-top: 31.875%;
  height: 0;
  background: url('http://www.playful.ma/wp-content/uploads/2017/02/img.png') 0 0 no-repeat;
  background-size: cover;
}

h4 {
  position:absolute;
  top:70.5%;
  left:34%;
  color: white;
  margin: 0;
  font-size: 1.4vw;
}

<div class="container">
   <h4>My Button</h4>  
</div>