title: Angular Material Flex: positioning a FAB dial relative to a responsive image
body: <blockquote>
    <p>Plunker available <a href="https://plnkr.co/edit/x9UvdT5c9MnonSM4IJFB?p=preview" rel="nofollow noreferrer">here</a></p>
  </blockquote>
  
  <p>We have a responsive grid-list of md-cards. I want to position the FAB always at the same place in the card, but it's responsive, so the cards size change, and I don't really have an idea on how to position it correctly. </p>
  
  <p>I want to achieve something similar to this, but in all the responsive sizes:</p>
  
  <p><a href="https://i.stack.imgur.com/n5glG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n5glG.png" alt="enter image description here"></a></p>
  
  <p>I've tried with <code>position: absolute</code>, <code>position:relative</code>, and translates, and didn't achieve much, but my css skills are far from being great. </p>
  
  <p>Any help will be appreciated! Thanks!</p>