我在以角材料定位工具栏上方的 FAB 图标时遇到问题答案

【问题标题】：I'm having problems locating the FAB icon over the toolbar in angular material我在以角材料定位工具栏上方的 FAB 图标时遇到问题
【发布时间】：2016-11-23 04:56:23
【问题描述】：

我在将 Angular Material FAB 按钮定位在工具栏上时遇到问题。

虽然我在 FAB 图标中的 z-index 大于工具栏上的 z-index。有什么想法吗？

HTML

<div ng-controller="AppCtrl" ng-cloak="" class="toolbardemoBasicUsage" ng-app="MyApp">
  <md-content>
    <md-toolbar class="md-tall md-accent">
      <h2 class="md-toolbar-tools">
        <span>Toolbar: tall (md-accent)</span>
      </h2>
    </md-toolbar>
    <md-content>
      <md-button class="md-fab my-fab-element" aria-label="Some content">
        +
    </md-button>
  </md-content>
</div>

CSS

.toolbardemoBasicUsage md-toolbar md-icon.md-default-theme {
  color: white;
}

md-content {
  position: relative;
}

.my-fab-element {
    right: 0;
    top: -35px;
    background: green !important;
}

演示

http://codepen.io/pennybirman/pen/NbjRNw

【问题讨论】：

请添加一些代码来帮助我们找到问题，甚至更好，一些演示（代码 sn-p、codepen、jsfiddle、plunker）
这是一个codepen。 FAB 图标应显示在工具栏上方。
link
好的，请在下面查看我的答案。下次请记得在您的问题中附上您的代码和演示！
@PennyBirman 链接的演示似乎与您提供的屏幕截图不同。

标签： angular-material

【解决方案1】：

FAB超越了md-content，它的overflow设置为auto，我觉得你应该改成overflow: visible

CSS：

md-content {
  position: relative;
  overflow: visible;
}

【讨论】：