将类似FB的按钮固定在图像顶部(响应式)

Question

我正在尝试修复一个Facebook的喜欢按钮，在一个特定的位置上的标题图片在WordPress上，但我遇到了问题与CSS样式(和可能的id的vs类)

在this website上，我想在图片标题图片的蓝色部分的“立即加入我们”文本下面放置一个“喜欢”按钮。

我试图创建一个单独的div类并对其进行定位，但至少可以说，我对固定/绝对/相对的知识相当粗制滥造。它做了一个绝对位置，但当我调整浏览窗口的大小时，它不会停留在图像中。(我们的活动目标是年轻学生，因此将有很多人通过小型笔记本电脑屏幕和智能手机访问我们的网站，因此必须做出响应)

有谁知道我该怎么做吗？

谢谢:)

Answer 1

编辑HTML元素的布局，使like按钮位于主图像链接的下方，如下所示：

<div id="header-banner" style="width:100%;height:300px;">
  <a href="http://www.w4u.org.uk/">
    <img src="http://www.w4u.org.uk/wp-content/uploads/2013/02/copy-home-banner.jpg" class="header-image" width="960" height="250" alt="">
  </a>
  <div class="fb-like"></div>
</div>

完成后，通过将此代码添加到已有的内联样式中，调整like按钮的CSS：

top: -98px;

下面是您进行更改后它应该是什么样子：

​

​