将FB Like按钮固定在图像顶部的位置（响应）

Question

我正在尝试将一个Facebook Like按钮修复到WordPress上标题图像顶部的特定位置，但是我遇到了CSS样式（以及可能是id和类）的问题

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

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

有谁知道我该怎么做？

谢谢：）

Answer 1

修改HTML元素的布局，以便您的“喜欢”按钮位于主图像链接下方，如下所示：

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

一旦到位，通过将其添加到已经存在的内联样式中来调整类似按钮的CSS：

top: -98px;

以下是进行更改后应该是什么样子的图片：