修剪的浮動操作按鈕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

回答

相關問題