为什么使用顶部或底部会降低元素的高度？

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 主题