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

通过使图像成为背景图像并使用视口单位字体大小的相对位置，可以非常接近。

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

Answer 2

使用此CSS可以帮助您找到正确的方向。

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

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

注意容器为position:relative;，叠加层为position:absolute;

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

2 个答案: