我在使用角度材料在工具栏上找到FAB图标时遇到问题

Question

我无法在工具栏上放置角度材料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

Answer 1

FAB超出md-content，其overflow设置为auto，我认为您应将其更改为overflow: visible

CSS：

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