ツールバー上にFABアイコンを配置する際に問題があります

Question

ツールバーの上に角度のある材料のFABボタンを配置する際に問題があります。

FABのアイコンで私のz-indexがツールバー上の1よりも大きいですが。何かご意見は？

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; 
} 

DEMO

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

Answer 1

FABはmd-contentを超え、及びそのoverflowがautoに設定されている、私はあなたがそれを変更すべきだと思います〜overflow: visible

CSS：

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