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

回顾一下：删除所有位置：相对; ，但将顶部的一个交换为绝对值。同时删除 bottom：0; 和 float：right;

希望这会有所帮助;）

Answer 2

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

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

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

希望这会有所帮助;）

位置将其按钮固定在Pinterest插件的图像顶部

2 个答案: