title: Clipped Floating Action Button CSS
body: <p><strong>The problem</strong></p>
  
  <p>I'm trying to create a website using <a href="http://www.getmdl.io" rel="nofollow noreferrer">Material Design Lite</a>, and I'm trying to insert a Floating Action Button on the top of a card. But thing is... It's getting clipped! I'm not sure why, I'm kinda new to this world.</p>
  
  <p><strong>Expected behavior</strong></p>
  
  <p>I want something like this. (Taken from <a href="http://www.getmdl.io/templates/blog/index.html" rel="nofollow noreferrer">here</a>).</p>
  
  <p><a href="https://i.stack.imgur.com/acKQD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/acKQD.jpg" alt="enter image description here"></a></p>
  
  <p><strong>What I'm getting</strong></p>
  
  <p>This is how my FAB looks like now.</p>
  
  <p><a href="https://i.stack.imgur.com/LVzvg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LVzvg.png" alt="enter image description here"></a></p>
  
  <p><strong>The code</strong></p>
  
  <p>Here's the <strong>HTML</strong>.</p>
  
  <pre><code>&lt;div class="mdl-card mdl-shadow--2dp card card-historico"&gt;
                      &lt;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"&gt;
                          &lt;i class="material-icons" role="presentation"&gt;refresh&lt;/i&gt;
                          &lt;span class="visuallyhidden"&gt;Refresh&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;div class="mdl-card__title card-title"&gt;
                          &lt;h4 class="mdl-card__title-text"&gt;Histórico&lt;/h4&gt;
                      &lt;/div&gt;
  
                      &lt;div class="container"&gt;
                          &lt;!-- Table contents here --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>And the <strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>The rest of the CSS is from MDL, so... I'm not sure if I'll have to post it here.</p>
  
  <p>Anyways, can anyone help me out with this?</p>