Angular Material Flex：相对于响应式图像定位 FAB 表盘答案

【问题标题】：Angular Material Flex: positioning a FAB dial relative to a responsive imageAngular Material Flex：相对于响应式图像定位 FAB 表盘
【发布时间】：2016-06-07 06:06:35
【问题描述】：

Plunker 可用here

我们有一个响应式的 md 卡网格列表。我想始终将 FAB 定位在卡片中的同一位置，但它具有响应性，因此卡片大小会发生变化，我真的不知道如何正确定位它。

我想实现与此类似的东西，但在所有响应式尺寸中：

我尝试过position: absolute、position:relative 和翻译，但没有取得太大成就，但我的 css 技能远非出色。

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

【问题讨论】：

仅供参考，“flex”标签指的是 Apache Flex（想想 Flash 编程）——正如标签 wiki 所说，使用“flexbox”代替 CSS 问题。
不知道，谢谢提示！

标签： css angularjs css-position flexbox angular-material

【解决方案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>

【讨论】：

右：-30px 似乎可以解决问题！谢谢！在验证答案之前，我会稍等片刻，看看是否有更“类似 flex”的方法。