為什么使用頂部或底部會降低元素的高度？

Question

我正在嘗試以響應方式定位一個圖標，它是 WordPress 插件的一部分。

使用margin-top和margin-bottom可以將圖標放置在頁面bottom ，但是top和bottom高於10px似乎與position: relative;結合使用時降低了圖標的高度position: relative;

@media(max-width: 768px) {
    #a2a_share_save_widget-3 {
        position: relative !important;
        top: 20px !important;
        left: 95%;
        margin-left: -37px;
        background-color: transparent! important;
        color: transparent! important;
    }
}

如果我將top減少到10px ，圖標會再次恢復到全高。

網址：

<div id="a2a_share_save_widget- 3" class="widget widget_a2a_share_save_widget">
    <div class="a2a_kit a2a_kit_size_32 addtoany_list">
        <a class="a2a_dd a2a_counter addtoany_share_save addtoany_share" href="https://www.addtoany.com/share"></a>.
    </div>
</div>

我想要的是應用top或bottom來調整位置，而不是圖標高度。

移動頁面在這里

Answer 1

問題不在於共享小部件的高度被降低。 問題是overflow: hidden被賦予其祖先section - 共享小部件在技術上是溢出的並且它的一部分被隱藏。

因此，要解決此問題，請刪除/覆蓋屬性overflow: hidden from section

#content section {
    overflow: visible;
}

或者讓小部件的容器取 X 量的最小高度

div#main {
    min-height: 80px;
}

我想您想提高特異性，因為這些示例是通用術語，並且您使用的是 wordpress 主題