我来帮你搞定这个按钮定位的问题！你现在的核心问题是按钮不在图片的容器里，而且定位属性没设置对，所以没法跟着图片同步调整位置。咱们一步步来修改：

关键修改要点 #

• 把按钮移入图片容器：a.btn 必须放到 .img-wrapper 内部，这样才能利用容器的 position: relative 作为定位基准。
• 调整按钮的定位属性：把按钮的 position: relative 改成 position: absolute，然后用 top/left（或 bottom/right）来固定它在图片上的相对位置。
• 保留图片的布局属性：你给图片设置的 margin-top 和 margin-left 可以保留，容器的相对定位会让按钮跟着图片一起移动。

修改后的完整代码 #

<h1>De zakelijke VR/AR hardware leverancier van Benelux</h1>
<div class="img-wrapper">
  <img class="img-responsive" src="vrgt.png">
  <!-- 将按钮移至图片容器内部 -->
  <a href="#" class="btn">Meer Info</a>
</div>

.img-wrapper { 
  position: relative; 
  /* 可选：添加这个属性避免容器占满整行，更贴合图片宽度 */
  display: inline-block;
}
.img-responsive { 
  max-width: 100%; 
  height: auto; 
  margin-top: 180px; 
  margin-left: 360px; 
}
a.btn { 
  display: inline-block; 
  padding: 0.2em 1.45em; 
  margin: 0.1em; 
  border: 0.15em solid #CCCCCC; 
  box-sizing: border-box; 
  text-decoration: none; 
  font-family: 'Segoe UI', 'Roboto', sans-serif; 
  font-weight: 400; 
  color: #000000; 
  background-color: #ffc966; 
  text-align: center; 
  /* 改为绝对定位，相对于父容器.img-wrapper定位 */
  position: absolute; 
  /* 这里根据你的预期效果调整位置，示例以右下角为例 */
  bottom: 20px; 
  right: 20px; 
}
a.btn:hover { border-color: #7a7a7a; }
a.btn:active { background-color: #999999; }

/* 响应式适配：移动端微调按钮大小与位置 */
@media all and (max-width:30em) { 
  a.btn { 
    padding: 0.15em 1em;
    font-size: 0.9em;
    bottom: 15px;
    right: 15px;
  } 
}

原理说明 #

• .img-wrapper 设置 position: relative 后，成为了内部绝对定位元素的“定位上下文”，按钮的位置会相对于这个容器（也就是图片的范围）计算。
• 用 bottom 和 right 定位时，无论图片怎么缩放（响应式窗口调整或移动端），按钮都会保持在图片的对应相对位置，不会脱离图片范围。
• 如果你的预期位置不是右下角，只需要调整 top/left/bottom/right 的数值即可，比如想要垂直居中偏左，可以用 top: 50%; left: 20%; transform: translateY(-50%); 实现。

内容的提问来源于stack exchange，提问作者Venzo