css - Pinterest プラグインの画像の上に Pin it ボタンを配置します

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

要約: すべてのposition: relative;を削除します。しかし、一番上のものを絶対に交換してください。下も削除: 0; フロート: 右;

お役に立てれば ;）

Answer 2

右下に表示するには、別の CSS ルールを追加します。

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

次に、bottom: 0px;を追加します。.sn_pinへ

お役に立てれば ;）