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

Posted 2023-03-06

【中文标题】制作一个保持在图像顶部相同位置的响应按钮

【英文标题】：make a responsive button that stays in the same position on top of an image

【发布时间】：2017-06-22 22:42:42

【问题描述】：

我想在响应式图片的顶部放置一个按钮，但不在中心，我希望它在图片中另一个按钮的顶部保持相同的位置。 这是我在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 在调整浏览器大小时保持在图像中蓝色按钮顶部的相同位置。 谢谢。

【问题讨论】：

jsfiddle.net/rvr21jq6/1

@linktoahref 谢谢，但如果图像是响应式的，这将不起作用。

【参考方案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;

【讨论】：

此代码不会使覆盖 div 位于图像顶部的同一位置，但谢谢。

【参考方案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>

【讨论】：

非常感谢@Michael Coker，这项工作很棒。我还有一个问题，如果我想使用图像而不是文本怎么办。我的意思是在调整浏览器大小时保持在同一位置的图像。