无法在 md-tabs 中将 md-button 带到前台答案

【问题标题】：Can't bring md-button to foreground in md-tabs无法在 md-tabs 中将 md-button 带到前台
【发布时间】：2017-07-06 21:06:11
【问题描述】：

我正在尝试将md-button 添加到md-tabs 区域。使用开发人员工具，我可以看到按钮在那里。但它是不可见的：

Screenshot

我在想，在 css 中使用具有非常高值的 z-index 可以解决 tghe 问题，但它没有：

.superclick {
  right: 0;
  position: absolute;
  z-index: 100;
}

此外，该按钮不可点击，我不确定原因是否在于它位于后台。

我在这里缺少什么？如何将按钮置于前台？

请查看我的fiddle 或我的代码：

<body>
<script>
angular.module('MyApp', ['ngMaterial'])

.controller('MyCtrl', function ($scope) {
  $scope.statuses = [
      {id: 1, name: "One", description: "First Tooltip"},
      {id: 2, name: "Two", description: "Second Tooltip"},
      {id: 3, name: "Three", description: "Third Tooltip"},
    ];

     $scope.addTab = function(){
      $scope.statuses.push({id: $scope.statuses.length + 1, name: $scope.statuses.length + 1, description: "New Tooltip"});
     }

   $scope.removeTab = function(status){
    alert(status.id);
    var index = $scope.statuses.indexOf(status);
    $scope.statuses.splice(index,1);
   }

});

</script>

<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<md-content class="md-padding">
  <md-tabs class="" md-selected="selectedTab" md-align-tabs="top" md-border-bottom md-autoselect md-dynamic-height>

    <md-tab ng-repeat="status in statuses">
      <md-tab-label>
        {{status.name}}
        <md-tooltip md-direction="bottom">
          {{status.description}}
        </md-tooltip>
      </md-tab-label>
      <md-tab-body>
        <md-button ng-click="removeTab(status)">Remove Tab</md-button>
      </md-tab-body>
    </md-tab>

    <md-button class="superclick">Superclick</md-button>

    <!--<md-tab ng-click="addTab()">
      <md-tab-label> + Add Tab</md-tab-label>
            <md-tab-body>       
      </md-tab-body>
    </md-tab>-->

  </md-tabs>
</md-content>
</div>
</div>
</body>

【问题讨论】：

有什么反馈或建议吗？

标签： css angularjs angular-material

【解决方案1】：

将您的opacity 和position 更改为（请参阅此fiddle）。您的元素被隐藏并与主导航重叠。

md-tab-data {
  opacity:1;
  z-index: 100;
  display: inline-block;
  width:200px;
  float:right;
  position:relative;
}

【讨论】：