剪辑浮动操作按钮 CSS答案

【问题标题】：Clipped Floating Action Button CSS剪辑浮动操作按钮 CSS
【发布时间】：2015-08-24 13:43:23
【问题描述】：

问题

我正在尝试使用Material Design Lite 创建一个网站，并且我正在尝试在卡片顶部插入一个浮动操作按钮。但事情是......它被剪掉了！我不知道为什么，我对这个世界有点陌生。

预期行为

我想要这样的东西。（取自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，所以...我不确定是否必须在此处发布。

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

【问题讨论】：

尝试为.card-historico启用overflow: visible。
你可以为你的问题创建一个演示吗？
@vivekkupadhyay overflow: visible 解决了这个问题！将其发布为答案，以便我接受;)

标签： html css material-design

【解决方案1】：

通过更改您的 CSS 一点点，例如：

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

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

【讨论】：