具有绝对位置的同一页面上的多个Addthis按钮仅显示第一个

Question

所以我每个盒子有3个盒子，我们有一个小的分享按钮，它位于盒子的右上角，（绝对的css位置）。

Addthis仅在悬停在第一个上时显示，如果取出css绝对值，则它将在所有框中起作用。我已尝试在实际共享元素上设置绝对值，并将其置于绝对容器中。两者都不起作用。我在addthis网站上找不到一个例子。

这是我尝试添加的绝对容器，这个div在较大的div里面

                                                                            一些内容

<style>

.promotionItem {position：relative; }

#promotionsSlider .shareContainer {
 width: 30px;
 height: 29px;
 position: absolute;
 top: 0;
 right: 0;
 display: block;
}
</style>

Answer 1

您将所有共享按钮放在彼此的顶部，通过使用绝对位置，他们不会尊重彼此在Dom中的位置...您需要给每个人留下一个左边的位置或垂直绝对位置取决于您希望他们坐在哪里。

下面我假设您有3个想要定位的图标，并且我将这些图标水平对齐。

#promotionsSlider .shareContainer {
 width: 30px;
 height: 29px;
 position: absolute;
 top: 0;
 right: 0;
 display: block;
}

#promotionsSlider .shareContainer:nth-of-type(2) {
 right: 40px;
}

#promotionsSlider .shareContainer:nth-of-type(3) {
 right: 80px;
}