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