如何在图像上方添加按钮

Question

希望你们在这个陌生的时代都能保持安全！

您如何在图像上放置按钮（请参阅here？

我正在使用Visual Studio，Jekyll和Github。

我已经尝试将确切的coding复制并粘贴到Visual Studio中，但结果却像this。

无论我用CSS做什么，我都无法将按钮移到图像上。

我希望问你们，因为我完全迷路了。

非常感谢大家！

-编码新手

Answer 1

您可以将其作为图片容器的子级，然后对其进行绝对定位。

.container {
  position: relative;
  width: 50vw;
  height: 25vh;
  background-color: #999999;
  border: 3px dotted black;
}

.btn-group {
  position: absolute; 
  bottom: 10%;
  left: 5%;
  border: 2px dotted red;
}

<div class="container">
<div class="btn-group">
  <button id="btn1">Request Proposal</button>
  <button id="btn2">Learn More</button>
</div>
</div>

Answer 2

您可以将代码发布到代码段或小提琴中吗？ Joel的答案应该可以解决问题，因此您的代码有问题。检查图像和按钮元素是否都在容器div中，并且两个元素的位置属性均正确-位置：相对（对于容器div）位置：绝对（用于按钮）然后，您可以使用具有顶部/底部和左侧/右侧属性的按钮的位置来进行操作。