Angular Material Flex：相对于响应图像定位 FAB 转盘

Question

Plunker available here

我们有一个响应式的 md 卡片网格列表。我想将 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>

Angular Material Flex：相对于响应图像定位 FAB 转盘

Angular Material Flex: positioning a FAB dial relative to a responsive image

css

css-position

flexbox

angularjs

angular-material