css - 将 Pin it 按钮放置在 Pinterest 插件的图像顶部

Question

我正在尝试在我的博客中使用 Pinterest 插件，它应该在我的帖子中的任何图像顶部显示一个 PinIt 按钮。我像往常一样安装了所有东西，但不是位于图像顶部的按钮，而是单独存在并且图像向下移动。我正在使用这种风格position:relative;，但它并没有像我想要的那样工作。
您可以在我的博客中看到它：http ://www.thehibou.com/

Answer 1

改变：

.sn_pin {
    background: url("http://www.thehibou.com/wp-content/uploads/2012/10/pinit-button.png") repeat scroll 0 0 transparent;
    bottom: 0;
    display: block;
    float: right;
    height: 117px;
    margin: -147px 0 0;
    opacity: 1 !important;
    position: relative;
    right: 0;
    width: 113px;
    z-index: 999;
}
.sn_pinterest .sn_pin {
    display: none;
    position: relative;
}
.sn_pinterest:hover .sn_pin {
    display: block;
    position: relative;
}
.sn_pinterest:hover {
    opacity: 0.75 !important;
    position: relative;
}

至：

.sn_pin {
    background: url("http://www.thehibou.com/wp-content/uploads/2012/10/pinit-button.png") repeat scroll 0 0 transparent;
    display: block;
    height: 117px;
    margin: -147px 0 0;
    opacity: 1 !important;
    position: absolute;
    right: 0;
    width: 113px;
    z-index: 999;
}
.sn_pinterest .sn_pin {
    display: none;
}
.sn_pinterest:hover .sn_pin {
    display: block;
}
.sn_pinterest:hover {
    opacity: 0.75 !important;
}

回顾一下：删除所有位置：相对；但是将前一个换成绝对的。同时删除底部：0；和浮动：对；

希望这可以帮助 ;）

Answer 2

要让它在右下角，添加另一个 CSS 规则：

.sn_pinterest {
    position: relative;
    overflow: hidden;
}

然后添加底部：0px；到 .sn_pin

希望这可以帮助 ;）