角度材质Flex：相对于响应图像定位FAB拨盘

Question

  

Plunker可用here

我们有一个响应式的md-cards网格列表。我想将FAB始终放在卡片的同一个位置，但它的响应速度很快，因此卡片大小会发生变化，而且我对如何正确定位它并不是很了解。

我希望实现与此类似的功能，但是在所有响应大小中：

我已经尝试了position: absolute，position:relative，并进行了翻译，并没有取得多大成就，但我的CSS技能远远不是很好。

任何帮助将不胜感激！谢谢！

Answer 1

你可以这样试试：

<div class="background-profile" style="position:relative; background-image:url('http://www.pisobarcelona.com/Mantenimiento/Fotos/Foto9432Piso2292.jpg')">
  <md-card-title>
     <md-card-title-text>
        <span class="md-headline">300€ por mes</span>
     </md-card-title-text>
  </md-card-title>
      <md-fab-speed-dial md-open="false" ng-class="md-fling" style="position:absolute; bottom:0; right:0; transform: translate(0%, 0%);">
        <md-fab-trigger>
            <md-button aria-label="menu" class="md-fab md-warn">
             <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
            </md-button>
       </md-fab-trigger>
     </md-fab-speed-dial>

</div>