jquery - 使用 jQuery 动态显示覆盖元素？

Question

所以我正在尝试使用 jQuery 在我的图像顶部动态显示“Pin this”按钮。问题是，当按钮显示时，它会将实际图像推过去。这是实时视图：

http://codepen.io/anon/pen/rGAzy

通过将位置更改为绝对位置来解决问题，但这样做会将按钮一直带到顶部。我想测试的页面之一是http://fstoppers.com/500px-announces-a-new-portfolio-system-and-new-prices

我从其他人那里继承了主题，所以如果我将其更改为具有绝对位置，它将出现在整个网站上。

我在处理这个问题时都错了吗？如何使用动态按钮？

Answer 1

确实是绝对的，但要添加position: relative;到父p标签。

http://codepen.io/anon/pen/gvKzE

Answer 2

这是最好的解决方案，无需额外的 Javascript，只需更改您的 html 结构：

<div id="container" style="position: relative;">
    <img />
    <div class="pin-button" style="position: absolute;">
    </div>
</div>