时间戳

首页 > 解决方案 > 为什么使用 top 或 bottom 会降低元素的高度？

html - 为什么使用 top 或 bottom 会降低元素的高度？

问题描述

我正在尝试以响应方式定位一个图标，该图标是 WordPress 插件的一部分。

使用margin-top和margin-bottom可以将图标定位在页面下方，但在top与bottom10pxposition: 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，图标会再次回到全高。

html:

<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调整位置，而不是图标高度。

手机页面在这里

标签： htmlcss

解决方案

问题不在于共享小部件的高度降低。问题在于overflow: hidden它的祖先section- 共享小部件在技术上是溢出的，并且它的一部分被隐藏了。

所以要解决这个问题，要么删除/覆盖overflow: hidden属性section

#content section {
    overflow: visible;
}

或者让小部件的容器采用 X 量的最小高度

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

我想您想增加特异性，因为这些示例是通用术语，并且您使用的是 wordpress 主题

推荐阅读