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

【问题标题】：Position Pin it button on top of the image for Pinterest Plugin将 Pin it 按钮放置在 Pinterest 插件的图像顶部
【发布时间】：2012-10-11 03:00:34
【问题描述】：

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

【问题讨论】：

标签： css wordpress plugins position pinterest

【解决方案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;
}

简单回顾一下：删除所有 position: relative; 但将顶部的位置换成绝对位置。同时删除 bottom: 0; 和 float: right;

希望这会有所帮助；）

【讨论】：

非常感谢！！！有效！现在唯一的问题是它位于右上角，而我希望它位于右下角？我在哪里改变它？
您有机会尝试我的第二个答案吗？那应该将 pinterest 按钮定位在图像的右下角；）

【解决方案2】：

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

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

然后将 bottom: 0px; 添加到 .sn_pin

希望这会有所帮助；）

【讨论】：