html - 剪裁的 float 操作按钮 CSS

Question

问题

我正在尝试使用 Material Design Lite 创建网站，我正在尝试在卡片顶部插入一个 float 操作按钮。但问题是……它被剪掉了!我不确定为什么，我对这个世界有点陌生。

预期行为

我想要这样的东西。 (取自 here )。

我得到了什么

这就是我的 FAB 现在的样子。

代码

这是HTML。

<div class="mdl-card mdl-shadow--2dp card card-historico">
                    <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent fab-top-right" id="refresh">
                        <i class="material-icons" role="presentation">refresh</i>
                        <span class="visuallyhidden">Refresh</span>
                    </button>
                    <div class="mdl-card__title card-title">
                        <h4 class="mdl-card__title-text">Histórico</h4>
                    </div>

                    <div class="container">
                        <!-- Table contents here -->
                    </div>
                </div>

和 CSS

.card {
   margin: 5% auto;
}

.card-title {
   background: #455A64; 
   color: #FEFEFE;
}

.card-historico {
   width: 45%;
   height: auto;
   z-index: 2;
}

.card-historico-table {
   margin-left:auto; 
    margin-right:auto;
    font-size: 14pt;
    color: rgba(0, 0, 0, 0.54);
}

.fab-top-right {
   position: absolute;
   top: 0px;
   right: 28px;
   transform: translate(0px, -28px);
   z-index: 900;
}

CSS 的其余部分来自 MDL，所以...我不确定是否必须将其发布在这里。

无论如何，有人可以帮我解决这个问题吗？

Answer 1

通过稍微更改您的 CSS，例如:

.card-historico {
   width: 45%;
   height: auto;
   z-index: 2;
   overflow: visible;
}

此 overflow: visible 将为您解决问题。 :)