修剪的浮动操作按钮CSS

我试图创建一个使用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，所以...我不知道我有没有它张贴在这里。

反正，任何人都可以帮我解决这个问题吗？

来源

2015-08-24 Mauker

尝试为'.card-historico'启用'overflow：visible'。 – vivekkupadhyay

你能为你的问题创建一个演示吗？ –

@vivekkupadhyay'overflow：visible'解决了问题！发布它作为答案，我可以接受它;） – Mauker

通过改变你的CSS像一点点：

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

这overflow: visible会做的伎俩为您服务。 :)

来源

2015-08-24 13:54:55 vivekkupadhyay

非常感谢。这就像一个魅力;） – Mauker

修剪的浮动操作按钮CSS

回答

相关问题